Angular boostrap

Angular boostrap DEFAULT

NG Bootstrap - Angular powered Bootstrap widgets

npm versionBuild StatuscodecovdevDependency StatusSauce Test Status

Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.

Please check our demo site and the list of issues to see all the things we are working on. Feel free to make comments there.

Table of Contents

Demo

Please check all components we have in action at https://ng-bootstrap.github.io

Dependencies

The only two dependencies are Angular and Bootstrap 4 CSS. The supported versions are:

ng-bootstrapAngularBootstrap CSS
1.x.x5.0.24.0.0
2.x.x6.0.04.0.0
3.x.x6.1.04.0.0
4.x.x7.0.04.0.0
5.x.x8.0.04.3.1
6.x.x9.0.04.4.1
7.x.x, 8.x.x10.0.04.5.0
9.0.011.0.04.5.0
10.0.012.0.04.5.0
11.0.0-beta.x12.0.05.0.0

Installation

We strongly recommend using Angular CLI for setting up a new project. If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it.

Just run the following:

ng add @ng-bootstrap/ng-bootstrap

It will install ng-bootstrap for the default application specified in your . If you have multiple projects and you want to target a specific application, you could specify the option:

ng add @ng-bootstrap/ng-bootstrap --project myProject

If you prefer not to use schematics and install everything manually, please refer to the manual installation instructions on our website.

Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive. See Angular browser support and Bootstrap browser support for more details.

Our code is automatically tested on all supported browsers.

Getting help

Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with .

StackOverflow is a much better place to ask questions since:

  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.

To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.

You think you've found a bug?

We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.

We ask you to respect two things:

  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, ng-bootstrap and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz (you can start by forking one from our demo page)

A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.

Please note that we will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. We'll mark the issue as non-actionable without it and close if not heard from the reporter.

Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.

Contributing to the project

Please check the DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.

Code of conduct

Please take a moment and read our Code of Conduct

Sours: https://github.com/ng-bootstrap/ng-bootstrap

3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial

Angular Bootstrap Throughout this tutorial, we’ll learn how to use bootstrap 4 with Angular 10 (and any previous versions such as Angular 9) to make your Angular app responsive.

We’ll learn how to install (and uninstall) bootstrap in Angular from npm, cdn or using the ng add schematic, and add bootstrap to the styles/scripts arrays of the angular.json file. Next, we’ll learn how to build user interfaces with various components such as navigation bars, grid, date and time pickers, tooltips, carousels, modals, tabs, dropdowns, and forms.

We’ll also see the advantages of Angular implementations for Bootstrap  —  vs vs . And see some popular Angular Bootstrap templates that you can use with Angular to quickly create your layouts.

3+ Ways to Add Bootstrap 4 to Angular

In this section, we will see ways to integrate Angular and Bootstrap to style apps built.

We’ll see how to integrate Angular with Bootstrap, in various ways including using and packages.

We’ll be using Angular CLI 10 for generating a brand new project.

These are the steps of our tutorial:

  • Step 1 — Installing Angular CLI v10
  • Step 2 — Installing Bootstrap 4 in Your Angular 10 Project
  • Step 3 (Method 1) — Adding Bootstrap 4 to Angular 10 Using
  • Step 3 (Method 2) — Adding Bootstrap 4 to Angular 10 Using
  • Step 3 (Method 3) — Adding Bootstrap 4 to Angular 10 Using
  • Alternative Step — Adding Bootstrap 4 Using and

Note: You can also use Ionic UI components to create beautiful and professional Angular apps, read Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 10

What is Bootstrap

Bootstrap is the most popular HTML and CSS framework for building responsive layouts with ease and without having a deep knowledge of CSS (Still custom CSS is required to customize your design and make it different from the other Bootstrap-styled websites unless you are using a BS theme developed specifically for your requirements.

Bootstrap 4 is the latest version of Bootstrap which brings many new and powerful features to the framework most importantly Flexbox which is now the default display system for the Bootstrap grid layout (one of the most important features of Bootstrap).

3+ Ways to Include Bootstrap 4 In Your Angular Project

You can include Bootstrap in your Angular project in multiple ways:

  • Including the Bootstrap CSS and JavaScript files in the section of the file of your Angular project with a and tags,
  • Importing the Bootstrap CSS file in the global file of your Angular project with an keyword.
  • Adding the Bootstrap CSS and JavaScript files in the and arrays of the file of your project

Step 1 — Installing Angular CLI v10

Let’s get started by installing Angular CLI v10 if it is not yet installed on your machine.

Head over to a new command-line interface and run the following command to install the latest version of the Angular CLI:

Note: This will install the Angular 10 CLI globally on your system so depending on your npm configuration you may need to add (for superuser access) in macOS and Linux or use a command prompt with admin access in Windows.

After the installation, you’ll have at your disposal the ng utility. Let’s use it to generate a new Angular 10 project as follows:

You will be prompted for a couple of questions:

Most importantly, choose CSS as the stylesheet format because we’ll use the CSS version of Bootstrap in our tutorial.

The command will generate the directory structure and necessary files for the project and will install the required dependencies.

Next, navigate inside the root folder of your project:

You can then serve your Angular 10 application using the command as follows:

Your app will be served from http://localhost:4200/

Step 2 — Installing Bootstrap 4 in Your Angular 10 Project

In this step, we’ll proceed to add Bootstrap 4 to our Angular 10 application.

There are various ways that you can use to install Bootstrap in your project:

  • Installing Bootstrap from npm using the command,
  • Downloading Bootstrap files and adding them to the folder of your Angular project,
  • Using Bootstrap from a CDN.

Let’s proceed with the first method. Go back to your command-line interface and install Bootstrap 4 via npm as follows:

This will also add the bootstrap package to . At the time of writing this tutorial, bootstrap v4.3.1 will be installed.

The Bootstrap 4 assets will be installed in the folder. You'll need to tell Angular where to look for them.

Next, you also need to install jQuery using the following command:

At the time of this tutorial jquery v3.4.1 will be installed.

Step 3 (Method 1) — Adding Bootstrap 4 to Angular 10 Using

Open the file of your project and include:

  • in the array,
  • in the array,
  • in the array,

As follows:

Note: You also need to add the jQuery JavaScript library file.

Step 3 (Method 2) — Adding Bootstrap 4 to Angular 10 Using

You can also include Bootstrap files from using the file.

Open the file and add the following tags:

  • A tag for adding the file in the section,
  • A tag for adding the file before the closing tag,
  • A tag for adding the file before the tag.

This is an example:

Step 3 (Method 3) — Adding Bootstrap 4 to Angular 10 Using

We can also use the file to add the CSS file of Bootstrap to our project.

Open the file of your Angular project and import the file as follows:

This replaces the previous method(s), so you don’t need to add the file to the array of the file or to the file.

Note: The JavaScript file(s) can be added using the array or the tag like the previous methods.

Alternative Step — Adding Bootstrap 4 Using and

Bootstrap depends on the jQuery and popper.js libraries, and if you don’t include them in your project, any Bootstrap components that rely on JavaScript will not work.

Why not include those libs? For Angular, it’s better to avoid using libraries that make direct manipulation of the DOM (like jQuery) and let Angular handle that.

Now, what if you need the complete features of Bootstrap 4 without the JavaScript libraries?

A better way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as and

Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code Source

So first you’ll need to install the library from npm using the following command:

Once you finish the installation, you’ll need to import the main module:

Next, you’ll need to add the module you imported in your app root module as follows:

Please note that requires the Bootstrap 4 CSS file to be present.

You can add it in the styles array of the file as follows:

Now, you can use Bootstrap 4 in your Angular application.

You can find all the available components via this link.

You can also use the library. Simply head back to your terminal, make sure you are inside your Angular project then run the following command to install

You also need the Bootstrap 4 CSS files. Add the following line in the of your Angular app which includes Bootstrap from a CDN:

You can also install bootstrap from npm and use the previous way to include the CSS file (via the styles array in the file):

Next, open the file and update is as follows:

This an example of importing two components BsDropdownModule and AlertModule.

You need to import the module for each component you want to use in the same way.

provides each Bootstrap component in each own module so you only import the components you need. In this way, your app will be smaller since it bundles only the components you are actually using.

You can find all the available components that you can use from the docs.

Adding Bootstrap 4 to Angular 10 Using Schematics

Thanks to the new command added on Angular 7+, you have a new simpler and easier way to add Bootstrap without using the command for installing the required dependencies or adding any configurations.

You can simply run the following command to add :

That’s it. You now have support for Bootstrap components and styles without any extra configurations. You also don’t need jQuery since we are using .

Summary

In this section, we’ve seen different ways of including Bootstrap 4 in Angular 10 apps, such as:

  • Using original Bootstrap 4 assets from npm,
  • Using the library,
  • And finally using the

The most important difference between vs. is that uses separate modules for components to reduce the final app size.

Styling an Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms, and Cards

In this section, we’ll learn how to integrate and use bootstrap 4 with Angular 10 by building an example application step by step.

We’ll see how to initialize an Angular 10 project and integrate it with Bootstrap 4. Next, we’ll use the various Bootstrap 4 CSS utilities to create a responsive layout with navbars, tables, forms, buttons, cards, and jumbotrons.

Bootstrap is a free and open-source CSS framework for creating responsive layouts, it’s mobile-first and contains ready CSS utilities for typography, forms, buttons, and navigation, etc.

This tutorial works with all recent versions of Angular i.e version 7, 8, 9 and 10.

There are various ways of integrating Angular with Bootstrap that we have seen in the previous section. Let’s see a possible solution by example. These are the steps of this section:

  • Step 1 — Installing Angular CLI 10
  • Step 2 — Initializing your Angular 10 Project
  • Step 3 — Installing Bootstrap 4
  • Step 4 — Creating Angular Components and Setting up Routing
  • Step 5 — Adding a Bootstrap 4 Jumbotron
  • Step 6 — Creating an Angular Bootstrap 4 Table
  • Step 7 — Adding a Bootstrap 4 Form Component

Step 1 — Installing Angular CLI 10

Let’s start by installing the latest version of Angular CLI. In your terminal, run the following command:

Step 2 — Initializing your Angular 10 Project

After installing Angular CLI, let’s initialize an Angular 10 project by running the following command:

The CLI will then ask you:

Press Y.

Next, it will ask you:

Choose “CSS”.

Next, we need to set up Angular 10 forms.

Go to the file, import from , and include it in the array as follows:

Step 3 — Installing Bootstrap 4

After initializing your Angular 10 project, let’s proceed to install Bootstrap 4 and integrate it with Angular.

Go to your project’s folder:

Next, install Bootstrap 4 and jQuery from npm using the following command:

Next, go the file and add the paths of Bootstrap CSS and JavaScript files as well as jQuery to the and arrays under the target as follows:

Step 4 — Creating Angular Components and Setting up Routing

After installing and integrating Bootstrap 4 with your Angular 10 project, let’s create some components to test various Bootstrap styles.

Go to your command-line interface and run the following commands:

Next, we need to include these components in the routing module to enable multiple views.

Go to the file and update it as follows:

Step 5 — Adding A Bootstrap 4 Jumbotron

A Bootstrap Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site

Let’s add a Bootstrap Jumbotron component to our jumbotron page.

Head to the file and add the following HTML markup:

We use the built-in class to create a Bootstrap Jumbotron.

Step 6 — Creating an Angular 10 and Bootstrap 4 Table

Let’s now see how to use a Bootstrap 4 table to display tabular data.

Go the file and add some data that we can display:

We simply defined two variables and for holding the set of employees and the selected employee. And a method which assigns the selected employee to the variable.

Next, go to the file and update it as follows:

A Bootstrap 4 Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

We use the built-in and classes to create Bootstrap tables, the , , and classes to create cards.

Step 7 — Adding A Bootstrap 4 Form Component to your Angular 10 App

Let’s proceed by adding a Bootstrap-styled form to the component.

Next, go to the file and update it as follows:

Next, go to the file and update it as follows:

We make use of the and classes to create a Bootstrap form.

Step 8 — Serving your Angular 10 Application

Head over to your command-line interface, and run the following command from the folder of your project:

A development server will be started at the address.

Summary

As a recap, we have seen how to initialize an Angular 10 project and integrate it with Bootstrap 4. Next, we used various Bootstrap CSS utilities to create a responsive layout with tables, forms, buttons, cards and jumbotrons.

Angular 10 Carousel Example with Bootstrap 4

In this tutorial, we'll learn how to create a carousel with the latest Angular 10 version and Bootstrap 4.

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. Source

Before getting started you need a few prerequisites:

  • Basic knowledge of TypeScript. Particularly the familiarity with Object Oriented concepts such as TypeScript classes and decorators.
  • A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the Angular CLI like the most frontend tools nowadays. You can simply go to the downloads page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: If you don't want to install a local environment for Angular development but still want to try the code in this tutorial, you can use Stackblitz, an online IDE for frontend development that you can use to create an Angular project compatible with Angular CLI.

Step 1 — Installing Angular CLI 10

Let's start by installing the latest Angular CLI 10 version.

Angular CLI is the official tool for initializing and working with Angular projects. Head over to a new command-line interface and run the following command:

At the time of writing this tutorial, angular/cli v10 will be installed on your system.

Step 2 — Creating a New Angular 10 App

In the second step, let's create our project. Head back to your command-line interface and run the following commands:

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

Next, navigate to you project’s folder and run the local development server using the following commands:

Open your web browser and navigate to the address to see your app running.

Step 3 — Installing Ng-Bootstrap

Next, we need to install using the following command:

This library provides an Angular implementation for Bootstrap 4 so you don't need to use jQuery.

Open the file and update it as follows:

We import and add it to the providers array of the component, next we inject it via the constructor and use it to customize default values of carousels used by this component and its children. We set the interval between slides to two seconds, enabled the keyboard to move slides, and pause on hover on each slide.

We also defined an array of images to use for slides.

Next, open the file and update it as follows:

We use with the directive for add a carousel slide and we use HTML to define the content for the slide.

Next, open the file and add the following styles:

You can play with this example from https://stackblitz.com/edit/angular-10-carousel-example

Summary

In this tutorial, we've seen how to create a carousel with rich slides in Angular 10 using .

Angular 10 Rating Example With Ng-Bootstrap

In this section, we'll see by example how to create a rating component with Bootstrap 4, HTML Select and Angular 10 Forms. We'll be using the component from . We'll also see how to use the HTML select control with the directive inside a reactive form. How to bind select element to a TypeScript object or string literal using and properties respectively, and how to assign a default value to select from an array of elements.

NgBoostrap is the Angular adapted version of Bootstrap UI components. Using ng-bootstrap we can easily integrate bootstrap library to our Angular project and use it’s awesome UI components very easily. Bootstrap is tried and tested and fully responsive for multiple platforms and screen sizes. Moreover, it is now an industrial standard adopted almost everywhere.

HTML forms are necessary in most web applications. Selects in forms can be used when you have multiple options and want users to select one of them before submitting the form. In Angular, you can use objects for option values and not only strings.

This is an example of a component template with the select control:

In our Angular component, we need to have a array with some cities.

We use the property to bind the city to but you can also use instead. The property is used with string literals only, whereas can be used with objects. We'll see next another example of using with objects instead of strings.

This comes handy if we have a drop-down where we need to show the names of the objects from a TypeScript array. But when selecting the element from the drop-down you need to select the of the array element for querying the database for example. In this case, we need to use as it works with TypeScript objects and not just strings.

In the previous tutorial, you've seen how you can install Angular 10 CLI from npm, so let's start by creating a new project.

Creating a New Angular 10 Project

Let's get started by creating a new Angular 10 project using the following command:

Adding Ng-Bootstrap

We’ll see how to set up Bootstrap in our project for styling our UI using . For that purpose, we’ll first need to add and from npm in our project using the following command:

This will install for the default application specified in your file.

Since has a dependency on i18n, we’ll also need add the package to our project using the following command:

Next, open the file and add and in the array of as follows:

Next, open the file and update it as follows:

We simply wrap the router outlet with some HTML markup styled with Bootstrap 4.

Creating an Angular 10 Rating Component

Next, let's create an Angular 10 component that will encapsulate our form. Head back to your terminal and run the following command:

Using the HTML Select Control with the Directive with a Reactive Form

Next, open the file and add the following form:

We used the HTML select element with , and the directive inside our reactive form.

is the Angular repeater directive. It simply repeats the host element for each element in a list.

The syntax in this example is as follows:

  • is the host element.
  • holds the books list from the class.
  • holds the current book object for each iteration through the list.

Next, update the file as follows:

We also provided a default value from the array books for select using . The first parameter is the default value.

Next, we need to add our rating component to the router configuration. Open the file and update it as follows:

Finally, you can start your development server using the following command:

Summary

In this Angular 10 tutorial, we’ve covered building a basic form with a rating component based on the component from . We have seen how to use the HTML select control with the directive inside a reactive form. How to bind select to a TypeScript object instead of string and how to assign a default value to select.

Angular 10 Star Rating Example

In this section, we'll build a star rating component with the latest Angular 10 version and Bootstrap.

Star rating is a common feature in product recommendation and eCommerce websites

We commonly rate something between zero and five stars.

Before getting started you need a few prerequisites:

  • Basic knowledge of TypeScript. Particularly the familiarity with Object Oriented concepts such as TypeScript classes and decorators.
  • A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the Angular CLI like the most frontend tools nowadays. You can simply go to the downloads page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: If you don't want to install a local environment for Angular development but still want to try the code in this tutorial, you can use Stackblitz, an online IDE for frontend development that you can use to create an Angular project compatible with Angular CLI.

Step 1 — Installing Angular CLI 10

Let's begin by installing the latest Angular CLI 10 version (at the time of writing this tutorial).

Angular CLI is the official tool for initializing and working with Angular projects. To install it, open a new command-line interface and run the following command:

At the time of writing this tutorial, angular/cli v10 will be installed on your system.

Step 2 — Creating a New Angular 10 App

In the second step, let's create our project. Head back to your command-line interface and run the following commands:

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

Next, navigate to you project’s folder and run the local development server using the following commands:

Open your web browser and navigate to the address to see your app running.

Step 3 — Installing Ng-Bootstrap

Next, we need to install using the following command:

This library provides an Angular implementation for Bootstrap 4 and also provides some useful components such as NgbRating -- a directive that allows you to display star rating bar.

Open the file and update it as follows:

Next, open the file and update it as follows:

Next, open the file and add the following CSS styles:

You can find this example in https://stackblitz.com/edit/angular-10-star-rating-example

Summary

In this short article, we've seen how to create a star rating component with Angular 10 and . Read the official docs for more details.

Creating an Angular Calendar with ngx-bootstrap Datepicker

In this tutorial, we'll see how to create an Angular 9 calendar UI with the datepicker component available from .

We'll learn to build a calendar component using bootstrap and datepicker component.

Date pickers are commonly used in web apps for choosing dates.

Dates can be selected by navigating between various dates using UI.

The library provides a datepicker component with many configuration options that you can use to customize the calendar view in your Angular 9 web app.

Throughout this tutorial, we will learn with steps to build a calendar component.

Let's start bu initializing a new Angular 9 app for our calendar example using Angular CLI.

We need to have the following prerequisites:

  • Node.js and NPM installed on your development machine,
  • Angular CLI v9 installed on your machine.

Generating your Angular Project

Open a new command-line interface and run the following command:

Navigate to your project's folder using:

Adding Bootstrap to Angular

Next, we need to integrate bootstrap and ngx-bootstrap with your Angular 9 project.

First, run the following command to install bootstrap 4 from npm:

Next, install the package:

Importing and Configuring the Datepicker Component

Open the file and add the following styling:

Next, we need to import the date picker component. Open file and update it as follows:

Adding a Calendar UI in your Angular 9 Template

Next, let's add a calendar component. Open the file and add the following HTML code:

That's it, save your file and run the following command in your terminal:

Summary

In this tutorial, we have a simple example of a calendar with the datepicker component of .

Appendix 1: Bootstrap 4 Card Explained

In this section, we’ll learn about the new Card component introduced in Bootstrap 4 which replaces many old components in Bootstrap 3, and can be used to build modern style web layouts without re-inventing the well or being a CSS designer with deep CSS knowledge. Now and thanks to Bootstrap 4 you can, as a developer with small CSS knowledge, build modern and professional card-based layouts.

Bootstrap cards provide flexible containers for displaying a mix of content (text, images, links, etc.) in a grouped way. They can be created by only adding a bunch of CSS classes to HTML markup and they can be easily styled and customized to present a new and distinguished look.

Cards are used to create advanced layouts such as Masonry. You’ll find cards in many big web platforms such as e-commerce websites, analytics dashboards, and blogs etc.

For Bootstrap users, Cards are a replacement for the popular components : panels, thumbnails and wells (all these can now be created with cards)

Before we start seeing how to create different card types. These are a summary of information about Bootstrap 4 Cards

  • Cards are used to present a mix of content in an elegant and compact way
  • Cards are built on top of Flexbox
  • Cards have no margin by default
  • Cards can be easily organized in groups, decks or Masonry columns
  • Cards have a header, footer, and one or more bodies
  • Cards can be easily aligned and well mixed with the other Bootstrap components etc.

In this tutorial you will get introduced to the new card component then you will see different elements of a card and finally you will build a Masonry-like layout using Cards and Card Columns

First, start by creating an HTML file andcopy the following starter template from the Bootstrap docs in the new file:

Now let’s start by creating a basic card. Add a with the class to create the outer container of your card component.

Next inside the outer container, add a header, card body, and footer.

You can add a header by either creating a or heading element then add the class.

You can create a card body by adding a class to a

For the footer, you need to add a with the class

Please note that you can add one or many card bodies to your card and you can also wrap the content inside the body in other tags such as

Use a card body when you want to create a padded section within a card.

  • Using and you can create image caps which are images that exist on the top and bottom of the card body/bodies

You can see that the card component is taking the whole width of its container division but you can control the width with different means:

  • using the and CSS properties
  • using the Bootstrap 4 Grid

You can also set the height but in most cases the height needs to fit the vertical alignment of the card content so you’ll rarely need to set it.

For adding content inside the card body you also have a bunch of classes () that make it easy to style different content types such as the card title, subtitle and text.

You can use standard HTML tags to style text within class

Want to use the cap image as an overlay? you can simply switch the class with the class

You can add navigation tabs and pills to the header of your card using , |, | classes with tags

You can add links to card content using the class with an element

You can use list as body content. For example this is how you can create two stylish lists without any extra custom CSS

How to Create Complex Card Based Layouts?

Singe cards are great way to display a mix of content but usually you need to display a collection of cards to build complex layouts such as Masonry like layouts.

Bootstrap Card Groups

You can create a single unit of multiple cards using Cards. The columns of the unit will take the same width and height (this is achieved using Flexbox).

This is an example of a group of 3 cards

Bootstrap Card Decks

Card Decks are similar to Card Groups except that individual cards inside a deck are not attached

Bootstrap Card Columns

Cards Columns provides a grouping that organizes cards into a masonry like (Pinterest style) layout. You don’t need to provide extra CSS or JavaScript/jQuery code just wrap your cards inside a with and Bootstrap 4 will present you with a Masonry layout. But keep in mind this is just CSS not JavaScript code involved so the masonry layout is simple, cards are ordered from top-left, bottom-right and there is no easy way to chage this behavior unless you are using to a Mosonry plugin.

See the following pen for an example

Summary

In this section, we’ve introduced the Card component.

Thanks to Bootstrap 4 you will no more be intimidated when you want to create modern style and card-based layouts even if you are just starting with HTML and CSS or you are a developer with no extensive knowledge of CSS.

Appendix 2: Bootstrap 4 Grid/Flexbox Explained

In this section, we’ll learn about the Grid layout based on Flexbox in Bootstrap 4.

This section is an introduction of the Bootstrap Grid system with taking Flexbox into consideration as Bootstrap 4 is now using Flexbox as the default display system for the grid layout that brings many new and powerful features to how you can build your website layouts using the Bootstrap 4 grid.

Flexbox is a CSS 3 display system that aims to make it easy and straightforward to create layouts for dynamic or unknown screen sizes by allowing the container to have more control over the size of elements and then adapt to different viewports.

Without further introductions let’s create and decipher a simple page layout using Bootstrap 4 grid system.

First, you need to create an HTML page and link the Bootstrap 4 assets. You can simply use this template from the official Bootstrap 4 docs

In order to create a grid, you’ll have to use some predefined BootStrap classes (, , )

The grid should have a container, rows and columns.

The container is simply a with the or classes. Why do you need a container and what is the difference between those two classes?

The container simply provides a width or a maximal width for all the other elements of the grid. For the difference allows you to create fixed-width container and allows you to create a full 100% container.

Rows provide home for columns. The number of rows can theoretically be unlimited.

Columns are what make the cells for the grid system. Each row can only take up to 12 columns (each column spans 1/12 of the available width). Practically a column spans more than one unit but there is one important rule ALL COLUMNS SHOULD ADD UP TO 12

To create a column you simply use a with the the class(es)

The first star for the screen breakpoint () and the second star for column size (1 .. 12).

See this code pen

Now let’s create a second row with two columns

Note that + ===

Also note that you don’t need to explicitly add upper breakpoint classes i.e to because means the size of the column should be 6 units from the small breakpoint and up

Next let’s add a third row with three columns

The first column spans two units, the second spans three units and the third spans the remaining 7 units. All colmuns sized add up to 12

+ + ===

If you have previously used Bootstrap before version 4 you should have be familiar with all these concepts so what the new features Bootstrap 4 bring?

If you need to create a layout with automatic width columns you simply need to use or just without specifying the size and Bootstrap will take care of equally dividing the available width among those columns

Now if you add a bunch of text to each column in order to chaine their heights you are going to get something like

As can be seen, unlike Bootstrap 3 all columns have the same height disregarding their contents which gives a better sense of a grid system.

Bootstrap 4 Flex Utilities

Bootstrap 4 by default uses Flexbox but it also provides a set of class utilities that allow you to work with Flexbox without resorting to custom CSS.

If you want to make a div element a flex container you can simply add the class to a

Or you can instead use to create a inline flex container.

These two classes have also responsive versions i.e you can use and where the start can be one of these breakpoints values .

One important aspect of Flexbox is the ability to easily set the direction of items inside a flex container.

By default the direction is horizontal from left to right but can be set to be horizontal but from right to left with or set it to be from left to right again with (the default).

You can also use the class to set a vertical direction from top to bottom, or the class to change the vertical direction from bottom to top.

See the other available classes to control flex properties from the docs.

Bootstrap 4 Display Utilities

Bootstrap 4 provides a set of utilities that make it easy to set the display property of elements responsively i.e you can change the display property for specific breakpoints or screen sizes. See the docs for more details

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

Simply use for the breakpoint or for where type can be one of these display types

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Summary

In this section, we’ve seen the grid layout in Bootstrap 4. Bootstrap has always been a powerful CSS framework for developers building their websites without a CSS designer in the team and now with the new features such as the default support for Flexbox you have great tools to build responsive layouts without being a CSS expert.



Sours: https://www.techiediaries.com/angular-bootstrap/
  1. Chevy cobalt bumper
  2. Boston apartments reddit
  3. Plano hard cases

Project Status (please read)

Due to Angular's continued adoption, our creation of the Angular version of this library, and the the project maintainers' moving on to other things, this project is considered feature-complete and is no longer being maintained.

We thank you for all your contributions over the years and hope you've enjoyed using this library as much as we've had developing and maintaining it. It would not have been successful without them.


UI Bootstrap - AngularJS directives specific to Bootstrap

GitterBuild StatusdevDependency StatusCDNJS

Quick links

Do you want to see directives in action? Visit https://angular-ui.github.io/bootstrap/!

Are you interested in Angular 2? We are on our way! Check out ng-bootstrap.

Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required. Notes:

  • Since version 0.13.0, UI Bootstrap depends on ngAnimate for transitions and animations, such as the accordion, carousel, etc. Include in the module dependencies for your app in order to enable animation.
  • UI Bootstrap depends on ngTouch for swipe actions. Include in the module dependencies for your app in order to enable swiping.

Angular Requirements

  • UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
  • UI Bootstrap 0.14.3 is the last version that supports Angular 1.3.x.
  • UI Bootstrap 0.12.0 is the last version that supports Angular 1.2.x.

Bootstrap Requirements

  • UI Bootstrap requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
  • UI Bootstrap 0.8 is the last version that supports Bootstrap CSS 2.3.x.

Install with NPM

$ npm install angular-ui-bootstrap

This will install AngularJS and Bootstrap NPM packages.

Install with Bower

$ bower install angular-bootstrap

Note: do not install 'angular-ui-bootstrap'. A separate repository - bootstrap-bower - hosts the compiled javascript file and bower.json.

Install with NuGet

To install AngularJS UI Bootstrap, run the following command in the Package Manager Console

PM> Install-Package Angular.UI.Bootstrap

Custom build

Head over to https://angular-ui.github.io/bootstrap/ and hit the Custom build button to create your own custom UI Bootstrap build, just the way you like it.

Manual download

After downloading dependencies (or better yet, referencing them from your favorite CDN) you need to download build version of this project. All the files and their purposes are described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files Don't worry, if you are not sure which file to take, opt for .

Adding dependency to your project

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the AngularJS module:

angular.module('myModule',['ui.bootstrap']);

To use this project with webpack, follow the NPM instructions. Now, if you want to use only the accordion, you can do:

importaccordionfrom'angular-ui-bootstrap/src/accordion';angular.module('myModule',[accordion]);

You can import all the pieces you need in the same way:

importaccordionfrom'angular-ui-bootstrap/src/accordion';importdatepickerfrom'angular-ui-bootstrap/src/datepicker';angular.module('myModule',[accordion,datepicker]);

This will load all the dependencies (if any) and also the templates (if any).

Be sure to have a loader able to process files like .

If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the file instead, which is available for the modules:

  • carousel
  • datepicker
  • datepickerPopup
  • dropdown
  • modal
  • popover
  • position
  • timepicker
  • tooltip
  • typeahead

The other modules, such as in the example below, do not have CSS resources to load, so you should continue to import them as normal:

importaccordionfrom'angular-ui-bootstrap/src/accordion';importtypeaheadfrom'angular-ui-bootstrap/src/typeahead/index-nocss.js';angular.module('myModule',[accordion,typeahead]);

Pre-2.0.0 does not follow a particular versioning system. 2.0.0 and onwards follows semantic versioning. All release changes can be viewed on our changelog.

FAQ

https://github.com/angular-ui/bootstrap/wiki/FAQ

Take a moment to read our Code of Conduct

PREFIX MIGRATION GUIDE

If you're updating your application to use prefixes, please check the migration guide.

Supported browsers

Directives from this repository are automatically tested with the following browsers:

  • Chrome (stable and canary channel)
  • Firefox
  • IE 9 and 10
  • Opera
  • Safari

Modern mobile browsers should work without problems.

Need help?

Need help using UI Bootstrap?

Please do not create new issues in this repository to ask questions about using UI Bootstrap

Found a bug?

Please take a look at CONTRIBUTING.md and submit your issue here.


We are always looking for the quality contributions! Please check the CONTRIBUTING.md for the contribution guidelines.

Head over to the Wiki for notes on development for UI Bootstrap, meeting minutes from the UI Bootstrap team, roadmap plans, project philosophy and more.

Sours: https://github.com/angular-ui/bootstrap
Como instalar BOOTSTRAP 5 en ANGULAR 11 #angular #bootstrap

Angular 2

For Angular 2 support, check out ng-bootstrap , created by the UI Bootstrap team.

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • AngularJS (requires AngularJS 1.4.x or higher, tested with 1.6.1). 0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.
  • Angular-animate (the version should match with your angular's, tested with 1.6.1) if you plan in using animations, you need to load angular-animate as well.
  • Angular-touch (the version should match with your angular's, tested with 1.6.1) if you plan in using swipe actions, you need to load angular-touch as well.
  • Bootstrap CSS (tested with version 3.3.7). This version of the library (2.5.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is fairly small: 122K minified for all directives with templates and 98K without (~31kB with gzip compression, with templates, and 28K gzipped without)

Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the module:

If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the in your HTML manually.

You can fork one of the plunkers from this page to see a working example of what is described here.

Migration to prefixes

Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide.

CSS

Original Bootstrap's CSS depends on empty attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty attributes to link tags will cause unwanted route changes. This is why we need to remove empty attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:

FAQ

Please check our FAQ section for common problems / solutions.

Reading the documentation

Each of the components provided in have documentation and interactive Plunker examples.

For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

  • - This setting has an angular $watch listener applied to it.
  • B - This setting is a boolean. It doesn't need a parameter.
  • C - This setting can be configured globally in a constant service*.
  • $ - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.
  • readonly - This setting is readonly.

For the services (you will recognize them with the prefix), we list all the possible parameters you can pass to them and their default values if any.

* Some directives have a config service that follows the next pattern: . The service's settings use camel case. The services can be configured in a function for example.

The accordion directive builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.

The body of each accordion group is transcluded into the body of the collapsible element.

uib-accordion settings

  • $C(Default: ) - Control whether expanding an item will cause the other items to close.

  • (Default: ) - Add the ability to override the template used on the component.

uib-accordion-group settings

  • (Default: ) - The clickable text on the group's header. You need one to be able to click on the header for toggling.

  • $(Default: ) - Whether the accordion group is disabled or not.

  • $(Default: ) - Whether accordion group is open or closed.

  • (Default: ) - Add the ability to override the template used on the component.

Accordion heading

Instead of the attribute on the , you can use an element inside a group that will be used as the group's header.

If you're using a custom template for the , you'll need to have an element for the heading to be transcluded into using (e.g. ).

Known issues

To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. .


{{alert.msg}}

A happy alert!

This directive can be used both to generate alerts from static and dynamic model data (using the directive).

uib-alert settings

  • $ - A callback function that gets fired when an is closed. If the attribute exists, a close button is displayed as well.

  • (Default: ) - Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the attribute.

  • (Default: ) - Add the ability to override the template used in the component.


Single toggle

{{singleModel}}

Checkbox

Model: {{checkModel}}Results: {{checkResults}}

Radio & Uncheckable Radio

{{radioModel || 'null'}}

With the buttons directive, we can make a group of buttons behave like a set of checkboxes () or behave like a set of radio buttons ().

uib-btn-checkbox settings

  • (Default: ) - Sets the value for the unchecked status.

  • (Default: ) - Sets the value for the checked status.

  • $ - Model where we set the checkbox status. By default or .

uib-btn-radio settings

  • $ - Model where we set the radio status. All radio buttons in a group should use the same .

  • - $ Value to assign to the if we check this radio button.

  • $(Default: ) - An expression that evaluates to a truthy or falsy value that determines whether the attribute is present.

  • B - Whether a radio button can be unchecked or not.

Additional settings

  • (Default: ) - Class to apply to the checked buttons.

  • (Default: ) - Event used to toggle the buttons.

Known issues

To use tooltips or popovers on elements within a , set the tooltip/popover option to . This is due to Bootstrap CSS styling. See here for more information.


Carousel creates a carousel similar to bootstrap's image carousel.

The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the module as a dependency.

Use a element with elements inside it.

uib-carousel settings

  • (Default: ) - Index of current active slide.

  • $(Default: ) - Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.

  • $(Default: ) - The interval pauses on mouseover. Setting this to truthy, disables this pause.

  • $(Default: ) - Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.

  • $(Default: ) - Disables the looping of slides. Setting to an expression which evaluates to a truthy value will prevent looping.

  • (Default: ) - Add the ability to override the template used on the component.

uib-slide settings

  • $(Default: ) - Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.

  • $(Default: ) - The index of the slide. Must be unique.

  • (Default: ) - Add the ability to override the template used on the component.


Resize window to less than 768 pixels to display mobile menu toggle button.




uib-collapse provides a simple way to hide and show an element with a css transition

uib-collapse settings

  • $ - An optional expression called after the element finished collapsing.

  • $ - An optional expression called before the element begins collapsing. If the expression returns a promise, animation won't start until the promise resolves. If the returned promise is rejected, collapsing will be cancelled.

  • $ - An optional expression called after the element finished expanding.

  • $ - An optional expression called before the element begins expanding. If the expression returns a promise, animation won't start until the promise resolves. If the returned promise is rejected, expanding will be cancelled.

  • $(Default: ) - Whether the element should be collapsed or not.

  • $ - An optional attribute that permit to collapse horizontally.

Known Issues

When using the attribute with this directive, CSS can reflow as the collapse element goes from to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.


The is what the uses internally to parse the dates. You can use it standalone by injecting the service where you need it.

The public API for the dateParser is a single method called .

Certain format codes support i18n. Check this guide for more information.

uibDateParser's parse function

parameters
  • (Type: , Example: ) - The input date to parse.

  • (Type: , Example: ) - The format we want to use. Check all the supported formats below.

  • (Type: , Example: ) - If you want to parse a date but maintain the timezone, you can pass an existing date here.

return
  • If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.

uibDateParser's format codes

  • (Example: ) - Parses a 4 digits year.

  • (Example: ) - Parses a 2 digits year.

  • (Example: ) - Parses a year with 1, 2, 3, or 4 digits.

  • (Example: , i18n support) - Parses the full name of a month.

  • (Example: , i18n support) - Parses the short name of a month.

  • (Example: , Leading 0) - Parses a numeric month.

  • (Example: ) - Parses a numeric month.

  • (Example: or ) - Parses a numeric month, but allowing an optional leading zero

  • (Example: , i18n support) - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.

  • (Example: , Leading 0) - Parses a numeric day.

  • (Example: ) - Parses a numeric day.

  • (Example: or ) - Parses a numeric day, but allowing an optional leading zero

  • (Example: , i18n support) - Parses the full name of a day.

  • (Example: , i18n support) - Parses the short name of a day.

  • (Example: , Leading 0) - Parses a 24 hours time.

  • (Example: ) - Parses a 24 hours time.

  • (Example: , Leading 0) - Parses a 12 hours time.

  • (Example: ) - Parses a 12 hours time.

  • (Example: , Leading 0) - Parses the minutes.

  • (Example: ) - Parses the minutes.

  • (Example: , Leading 0) - Parses the milliseconds.

  • (Example: , Leading 0) - Parses the seconds.

  • (Example: ) - Parses the seconds.

  • (Example: ) - Parses a 12 hours time with AM/PM.

  • (Example: ) - Parses the timezone offset in a signed 4 digit representation

  • (Example: , Leading 0) - Parses the week number

  • (Example: ) - Parses the week number

  • , , (Example: ) - Parses the era ( or )

  • (Example: ) - Parses the long form of the era ( or )

* The ones marked with , needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.

** It also supports as the format for parsing.

*** It supports template literals as a string between the single quote character, i.e. . If one wants the literal single quote character, one must use .


Selected date is: {{dt | date:'fullDate' }}

Inline


Our datepicker is flexible and fully customizable.

You can navigate through days, months and years.

The datepicker has 3 modes:

  • - In this mode you're presented with a 6-week calendar for a specified month.
  • - In this mode you can select a month within a selected year.
  • - In this mode you are presented with a range of years (20 by default).

uib-datepicker settings

  • $ - The date object. Must be a Javascript object. You may use the service to assist in string-to-object conversion.

  • $C(Default: ) - Supported angular ngModelOptions:

  • (Default: ) - Add the ability to override the template used on the component.

Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the attribute:

  • $ - An object to configure the datepicker in one place.

    • - An optional expression to add classes based on passing an object with date and current mode properties.

    • - An optional expression to disable visible options based on passing an object with date and current mode properties.

    • C(Default: ) - Current mode of the datepicker (day|month|year). Can be used to initialize the datepicker in a specific mode.

    • C(Default: ) - Format of day in month.

    • C(Default: ) - Format of month in year.

    • C(Default: ) - Format of year in year range.

    • C(Default: ) - Format of day in week header.

    • C(Default: ) - Format of title when selecting day.

    • C(Default: ) - Format of title when selecting month.

    • (Default: ) - The initial date view when no model value is specified.

    • C(Default: ) - Defines the maximum available date. Requires a Javascript Date object.

    • C(Default: ) - Sets an upper limit for mode.

    • C(Default: ) - Defines the minimum available date. Requires a Javascript Date object.

    • C(Default: ) - Sets a lower limit for mode.

    • C(Default: ) - Number of columns displayed in month selection.

    • C(Default: ) - Sets for datepicker. This can be overridden through attribute usage

    • C(Default: ) - An option to disable the propagation of the keydown event.

    • C(Default: ) - Whether to display week numbers.

    • C(Default: ) - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).

    • C(Default: ) - Number of rows displayed in year selection.

    • C(Default: ) - Number of columns displayed in year selection.

Keyboard support

Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

  • : Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
  • : Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
  • : Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
  • : Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
  • : Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
  • : Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
  • : Move to the first date of the view.
  • : Move to the last date of the view.
  • /: Select date.
  • +: Move to an upper mode.
  • +: Move to a lower mode.
  • : Will close popup, and move focus to the input.

Notes

If the date a user enters falls outside of the min-/max-date range, a validation error will show on the form.


Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.

This directive is composed by three parts:

  • which transforms a node into a dropdown.
  • which allows the dropdown to be toggled via click. This directive is optional.
  • which transforms a node into the popup menu.

Each of these parts need to be used as attribute directives.

uib-dropdown settings

  • (Default: ) - Controls the behavior of the menu when clicked.

    • - Automatically closes the dropdown when any of its elements is clicked.
    • - Disables the auto close. You can control it manually with . It still gets closed if the toggle is clicked, is pressed or another dropdown is open.
    • - Closes the dropdown automatically only when the user clicks any element outside the dropdown.
  • $(Default: ) - Appends the inner dropdown-menu to an arbitrary DOM element.

  • B(Default: ) - Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non value.

  • $(Default: ) - Defines whether or not the dropdown-menu is open. The will toggle this attribute on click.

  • : B(Default: ) - Enables navigation of dropdown list elements with the arrow keys.

  • $ - An optional expression called when the dropdown menu is opened or closed.

  • (Default: ) - You may specify a template for the dropdown menu. Check the demos for an example.

Additional settings

  • (Default: ) - Class to apply when the dropdown is open and appended to a different DOM element.

  • (Default: ) - Class to apply when the dropdown is open.

Known issues

For usage with ngTouch, it is recommended to use the programmatic trigger with ng-click - this is due to ngTouch decorating ng-click to prevent propagation of the event.


Selection from a modal: {{ $ctrl.selected }}

is a service to create modal windows. Creating modals is straightforward: create a template and controller, and reference them when using .

The service has only one method: .

$uibModal's open function

options parameter

  • (Type: , Default: ) - Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.

  • (Type: , Default: : Example: ) - Appends the modal to a specific element.

  • (Type: , ) - Sets the property on the modal. The value should be an id (without the leading ) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. Omitting this option will not impact sighted users but will weaken your accessibility support.

  • (Type: , ) - Sets the property on the modal. The value should be an id (without the leading ) pointing to the element that labels your modal. Typically, this will be a header element. Omitting this option will not impact sighted users but will weaken your accessibility support.

  • (Type: , Default: ) - Controls presence of a backdrop. Allowed values: (default), (no backdrop), (disables modal closing by click on the backdrop).

  • (Type: ) - Additional CSS class(es) to be added to a modal backdrop template.

  • (Type: , Default: ) - When used with & set to , it will bind the $scope properties onto the controller.

  • (Type: , Example: ) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have and a template or templateUrl set.

    It supports these bindings:

    • - A method that can be used to close a modal, passing a result. The result must be passed in this format:

    • - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format:

    • - The modal instance. This is the same injectable found when using .

    • - An object of the modal resolve values. See UI Router resolves for details.

  • (Type: , Example: ) - A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special injectable to access the modal instance.

  • (Type: , Example: ) - An alternative to the controller-as syntax. Requires the option to be provided as well.

  • - (Type: , Default: ) - Indicates whether the dialog should be closable by hitting the ESC key.

  • (Type: , Default: ) - Class added to the element when the modal is opened.

  • (Type: ) - Members that will be resolved and passed to the controller as locals; it is equivalent of the property in the router.

  • (Type: ) - The parent scope instance to be used for the modal's content. Defaults to .

  • (Type: , Example: ) - Optional suffix of modal window class. The value used is appended to the class, i.e. a value of gives .

  • (Type: ) - Inline template representing the modal's content.

  • (Type: ) - A path to a template representing modal's content. You need either a or .

  • (Type: ) - Additional CSS class(es) to be added to a modal window template.

  • (Type: , Default: ) - A path to a template overriding modal's window template.

  • (Type: ) - CSS class(es) to be added to the top modal window.

Global defaults may be set for via .

return

The method returns a modal instance, an object with the following properties:

  • (Type: ) - Can be used to close a modal, passing a result.

  • (Type: ) - Can be used to dismiss a modal, passing a reason.

  • (Type: ) - Is resolved when a modal is closed and rejected when a modal is dismissed.

  • (Type: ) - Is resolved when a modal gets opened after downloading content's template and resolving all variables.

  • (Type: ) - Is resolved when a modal is closed and the animation completes.

  • (Type: ) - Is resolved when a modal is rendered.


The scope associated with modal's content is augmented with:

  • (Type: ) - A method that can be used to close a modal, passing a result.

  • (Type: ) - A method that can be used to dismiss a modal, passing a reason.

Those methods make it easy to close a modal window without a need to create a dedicated controller.

Also, when using , you can define an method in the controller that will fire upon initialization.


Events fired:

  • - This event is fired if the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs. The modal will also be dismissed.

  • - This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open. Also, the and methods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.

UI Router resolves

If one wants to have the modal resolve using UI Router's pre-1.0 resolve mechanism, one can call in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's $resolve.

When the modal is opened with a controller, a object is exposed on the template with the resolved values from the resolve object. If using the component option, see details on how to access this object in component section of the modal documentation.


A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more.

Like the Bootstrap jQuery plugin, the popover requires the tooltip module.

Note to mobile developers: Please note that while popovers may work correctly on mobile devices (including tablets), we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.

There are three versions of the popover: and , and :

  • - Takes text only and will escape any HTML provided for the popover body.
  • $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
  • $ - A URL representing the location of a template to use for the popover body. Note that the contents of this template need to be wrapped in a tag, e.g., .

uib-popover-* settings

All these settings are available for the three types of popovers.

  • $C(Default: , Config: ) - Should it fade in and out?

  • $C(Default: , Config: ) - Should the popover be appended to '$body' instead of the parent element?

  • - Custom class to be applied to the popover.

  • $(Default: ) - Is it enabled? It will enable or disable the configured popover-trigger.

  • (Default: ) - Whether to show the popover.

  • C(Default: , Config: ) - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popover will attempt to position where it fits in the closest scrollable ancestor. Accepts:

    • - popover on top, horizontally centered on host element.
    • - popover on top, left edge aligned with host element left edge.
    • - popover on top, right edge aligned with host element right edge.
    • - popover on bottom, horizontally centered on host element.
    • - popover on bottom, left edge aligned with host element left edge.
    • - popover on bottom, right edge aligned with host element right edge.
    • - popover on left, vertically centered on host element.
    • - popover on left, top edge aligned with host element top edge.
    • - popover on left, bottom edge aligned with host element bottom edge.
    • - popover on right, vertically centered on host element.
    • - popover on right, top edge aligned with host element top edge.
    • - popover on right, bottom edge aligned with host element bottom edge.
  • C(Default: , Config: ) - For how long should the popover remain open after the close trigger event?

  • C(Default: , Config: ) - Popup delay in milliseconds until it opens.

  • - A string to display as a fancy title.

  • $(Default: ) - What should trigger a show of the popover? Supports a space separated list of event names, or objects (see below).

Note: To configure the tooltips, you need to do it on (also see below).

Triggers

The following show triggers are supported out of the box, along with their provided hide triggers:

  • :
  • :
  • :
  • :

The trigger will cause the popover to toggle on click, and hide when anything else is clicked.

For any non-supported value, the trigger will be used to both show and hide the popover. Using the 'none' trigger will disable the internal trigger(s), one can then use the attribute exclusively to show and hide the popover.

$uibTooltipProvider

Through the , you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:

  • (Example: ) - Extends the default trigger mappings mentioned above with mappings of your own.

  • - Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the C badge.

Known issues

For Safari 7+ support, if you want to use focus, you need to use an anchor tag with a tab index. For example:


$uibPosition service


offsetParent: {{elemVals.offsetParent}}
scrollParent: {{elemVals.scrollParent}}
scrollbarWidth: {{scrollbarWidth}}
position: {{elemVals.position}}
offset: {{elemVals.offset}}
viewportOffset: {{elemVals.viewportOffset}}
positionElements: {{elemVals.positionElements}}

The service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...).

getRawNode(element)

Takes a jQuery/jqLite element and converts it to a raw DOM element.

parameters
  • (Type: ) - The element to convert.
returns
  • (Type: ) - A raw DOM element.

parseStyle(element)

Parses a numeric style value to a number. Strips units and will return 0 for invalid (NaN) numbers.

parameters
  • (Type: ) - The style value to parse.
returns
  • (Type: ) - The numeric value of the style property.

offsetParent(element)

Gets the closest positioned ancestor.

parameters
  • (Type: ) - The element to get the offset parent for.
returns
  • (Type: ) - The closest positioned ancestor.

scrollbarWidth(isBody)

Calculates the browser scrollbar width and caches the result for future calls. Concept from the TWBS measureScrollbar() function in modal.js.

parameters
  • (Type: , Default: , optional) - Is the requested scrollbar width for the body/html element. IE and Edge overlay the scrollbar on the body/html element and should be considered 0.
returns
  • (Type: ) - The width of the browser scrollbar.

scrollbarPadding(element)

Calculates the padding required to replace the scrollbar on an element.

parameters
  • 'element' (Type: ) - The element to calculate the padding on (should be a scrollable element).
returns

An object with the following properties:

  • (Type: ) - The width of the scrollbar.

  • (Type: ) - Whether the width is overflowing.

  • (Type: ) - The total right padding required to replace the scrollbar.

  • (Type: ) - The oringal right padding on the element.

  • (Type: ) - Whether the height is overflowing.

  • (Type: ) - The total bottom padding required to replace the scrollbar.

  • (Type: ) - The oringal bottom padding on the element.

isScrollable(element, includeHidden)

Determines if an element is scrollable.

parameters
  • (Type: ) - The element to check.

  • (Type: , Default: , optional) - Should scroll style of 'hidden' be considered.

returns
  • (Type: ) - Whether the element is scrollable.

scrollParent(element, includeHidden, includeSelf)

Gets the closest scrollable ancestor. Concept from the jQueryUI scrollParent.js.

parameters
  • (Type: ) - The element to get the closest scrollable ancestor for.

  • (Type: , Default: , optional) - Should scroll style of 'hidden' be considered.

  • (Type: , Default: , optional) - Should the element passed in be included in the scrollable lookup.

returns
  • (Type: ) - The closest scrollable ancestor.

position(element, includeMargins)

A read-only equivalent of jQuery's position function, distance to closest positioned ancestor. Does not account for margins by default like jQuery's position.

parameters
  • (Type: ) - The element to get the position for.

  • (Type: , Default: , optional) - Should margins be accounted for.

returns

An object with the following properties:

  • (Type: ) - The width of the element.

  • (Type: ) - The height of the element.

  • (Type: ) - Distance to top edge of offset parent.

  • (Type: ) - Distance to left edge of offset parent.

offset(element)

A read-only equivalent of jQuery's offset function, distance to viewport.

parameters
  • (Type: ) - The element to get the offset for.
returns

An object with the following properties:

  • (Type: ) - The width of the element.

  • (Type: ) - The height of the element.

  • (Type: ) - Distance to top edge of the viewport.

  • (Type: ) - Distance to left edge of the viewport.

viewportOffset(element, useDocument, includePadding)

Gets the elements available space relative to the closest scrollable ancestor. Accounts for padding, border, and scrollbar width. Right and bottom dimensions represent the distance to the respective edge of the viewport element, not the top and left edge. If the element edge extends beyond the viewport, a negative value will be reported.

parameters
  • (Type: ) - The element to get the viewport offset for.

  • (Type: , Default: , optional) - Should the viewport be the document element instead of the first scrollable element.

  • (Type: , Default: , optional) - Should the padding on the viewport element be accounted for, default is true.

returns

An object with the following properties:

  • (Type: ) - Distance to top content edge of the viewport.

  • (Type: ) - Distance to bottom content edge of the viewport.

  • (Type: ) - Distance to left content edge of the viewport.

  • (Type: ) - Distance to right content edge of the viewport.

parsePlacement(placement)

Gets an array of placement values parsed from a placement string. Along with the 'auto' indicator, supported placement strings are:

  • top: element on top, horizontally centered on host element.
  • top-left: element on top, left edge aligned with host element left edge.
  • top-right: element on top, right edge aligned with host element right edge.
  • bottom: element on bottom, horizontally centered on host element.
  • bottom-left: element on bottom, left edge aligned with host element left edge.
  • bottom-right: element on bottom, right edge aligned with host element right edge.
  • left: element on left, vertically centered on host element.
  • left-top: element on left, top edge aligned with host element top edge.
  • left-bottom: element on left, bottom edge aligned with host element bottom edge.
  • right: element on right, vertically centered on host element.
  • right-top: element on right, top edge aligned with host element top edge.
  • right-bottom: element on right, bottom edge aligned with host element bottom edge.

A placement string with an 'auto' indicator is expected to be space separated from the placement, i.e: 'auto bottom-left'. If the primary and secondary placement values do not match 'top, bottom, left, right' then 'top' will be the primary placement and 'center' will be the secondary placement. If 'auto' is passed, true will be returned as the 3rd value of the array.

parameters
  • (Type: , Example: ) - The placement string to parse.
returns

An array with the following values:

  • (Type: ) - The primary placement.

  • (Type: ) - The secondary placement.

  • (Type: ) - Is auto place enabled.

positionElements(hostElement, targetElement, placement, appendToBody)

Gets gets coordinates for an element to be positioned relative to another element.

parameters
  • (Type: ) - The element to position against.

  • (Type: ) - The element to position.

  • (Type: , Default: , optional) - The placement for the target element. See the parsePlacement() function for available options. If 'auto' placement is used, the viewportOffset() function is used to decide where the targetElement will fit.

  • (Type: , Default: , optional) - Should the coordinates be cacluated from the body element.

returns

An object with the following properties:

  • (Type: ) - The targetElement top value.

  • (Type: ) - The targetElement left value.

  • (Type: ) - The resolved placement with 'auto' removed.

positionArrow(element, placement)

Positions the tooltip and popover arrow elements when using placement options beyond the standard top, left, bottom, or right.

parameters
  • (Type: ) - The element to position the arrow element for.

  • (Type: ) - The placement for the element.


Static


Dynamic

No animationObject (changes type based on value)

Stacked

A progress bar directive that is focused on providing feedback on the progress of a workflow or action.

It supports multiple (stacked) into the same element or a single element with optional attribute and transition animations.

uib-progressbar settings

  • $ - The current value of progress completed.

  • (Default: ) - Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.

  • $C(Default: ) - A number that specifies the total value of bars that is required.

  • $C(Default: ) - Whether bars use transitions to achieve the width change.

  • (Default: ) - Title to use as label (for accessibility).

uib-progress settings

  • $C(Default: ) - A number that specifies the total value of bars that is required.

  • $C(Default: ) - Whether bars use transitions to achieve the width change.

  • (Default: ) - Title to use as label (for accessibility).

uib-bar settings

  • $ - The current value of progress completed.

  • (Default: ) - Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.

  • (Default: ) - Title to use as label (for accessibility).


Default

{{percent}}%Rate: {{rate}} - Readonly is: {{isReadonly}} - Hovering over: {{overStar || "none"}}

Custom icons

(Rate: {{x}})

(Rate: {{y}})

Rating directive that will take care of visualising a star rating bar.

uib-rating settings

  • $C(Default: ) - Changes the number of icons.

  • $ - The current rate.

  • $ - An optional expression called when user's mouse is over a particular icon.

  • $ - An optional expression called when user's mouse leaves the control altogether.

  • $(Default: ) - An array of objects defining properties for all icons. In default template, & property is used to specify the icon's class.

  • $(Default: ) - Prevent user's interaction.

  • $C(Default: ['one', 'two', 'three', 'four', 'five']`) - An array of strings defining titles for all icons.

  • $(Default: ) - Clicking the icon of the current rating will reset the rating to 0.

  • $C(Default: ) - A variable used in the template to specify the state for unselected icons.

  • $C(Default: ) - A variable used in the template to specify the state (class, src, etc) for selected icons.


Select a tab by setting active binding to true:





Tabbed pills with CSS classes
Tabs using nested forms: Model: {{ model | json }}Nested Form: {{ outerForm.nestedForm | json }}
Sours: https://angular-ui.github.io/bootstrap/

Boostrap angular

Mike looked around convulsively, directly. At opposite him, in a deep black chair, Me. What do you think. - She smiled, showing in a disarming smile, even white teeth, there were no fangs at all. I liked you, in my collection there weren't any, and although I was chasing other prey, you turned up to me just in time.

Angular Bootstrap Tutorial - Building Websites with Angular Bootstrap - Angular Training - Edureka

Just don't get lost, please. - I'll wait. - See you, Sveta. - Until!.

You will also be interested:

Please bear with me until tomorrow. - Until tomorrow. - the man's voice became sad, - And when exactly tomorrow. He said hopefully. - In the morning I have classes, but from about two o'clock I will be free - Okay, I will definitely dial at the beginning of the third.



3736 3737 3738 3739 3740