Angular MDBootstrap Forms Checkbox Component
MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Checkbox Component in Angular MDBootstrap.
A Checkbox Component lets a user definitely choose a value from a limited number of choices in a subtle way.
Syntax:
<mdb-checkbox >CheckBox 1</mdb-checkbox>
Approach:
- Download Angular MDBootstrap from the official site.
- Extract the files and change them to the working directory.
- Install npm in the current project using the following command:
npm install
- After creating your project folder i.e. appname, move to it using the following command:
cd appname
- Start the server using the following command:
ng serve
Project Structure: After complete installation, it will look like the following:
Example 1: This is the basic example that illustrates how to use the Checkbox Component in Angular MDBootstrap.
app.component.html
< div id = 'gfg' > < h1 >w3wiki</ h1 > < h4 >Angular MDBootstrap Checkbox Component</ h4 > < br /> < mdb-checkbox [default]="true"> CheckBox 1 </ mdb-checkbox > < mdb-checkbox [default]="true"> CheckBox 2 </ mdb-checkbox > < mdb-checkbox [default]="true"> CheckBox 3 </ mdb-checkbox > </ div > |
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {} |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
Output:
Example 2: In this example, we will know how to use the checked state property in Checkbox Component.
app.component.html
< div id = 'gfg' > < h1 >w3wiki</ h1 > < h4 >Angular MDBootstrap Checkbox Component</ h4 > < br /> < mdb-checkbox [checked]="true"> CheckBox 1 </ mdb-checkbox > < mdb-checkbox [checked]="true"> CheckBox 2 </ mdb-checkbox > < mdb-checkbox [checked]="true"> CheckBox 3 </ mdb-checkbox > </ div > |
app.component.ts
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent {} |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
Output:
Example 3: In this example, we will know how to use indeterminate state property in Checkbox Component.
app.component.html
< div id = 'gfg' > < h1 >w3wiki</ h1 > < h4 >Angular MDBootstrap Checkbox Component</ h4 > < br /> < mdb-checkbox [indeterminate]="true" [default]="true"> CheckBox 1 </ mdb-checkbox > < mdb-checkbox [indeterminate]="true" [default]="true"> CheckBox 2 </ mdb-checkbox > < mdb-checkbox [indeterminate]="true" [default]="true"> CheckBox 3 </ mdb-checkbox > </ div > |
app.component.ts
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent {} |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
Output:
Example 4: In this example, we will know how to use the disabled state property in Checkbox Component.
app.component.html
< div id = 'gfg' > < h1 >w3wiki</ h1 > < h4 >Angular MDBootstrap Checkbox Component</ h4 > < br /> < mdb-checkbox [disabled]="true" [indeterminate]="true" [default]="true"> CheckBox 1 </ mdb-checkbox > < mdb-checkbox [disabled]="true" [default]="true"> CheckBox 2 </ mdb-checkbox > < mdb-checkbox [disabled]="true" [checked]="true" [default]="true"> CheckBox 3 </ mdb-checkbox > </ div > |
app.component.ts
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent {} |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
Output:
Example 5: In this example, we will know how to use the inline property in Checkbox Component.
app.component.html
< div id = 'gfg' > < h1 >w3wiki</ h1 > < h4 >Angular MDBootstrap Checkbox Component</ h4 > < br /> < mdb-checkbox [inline]="true" [indeterminate]="true" [default]="true"> CheckBox 1 </ mdb-checkbox > < mdb-checkbox [inline]="true" [default]="true"> CheckBox 2 </ mdb-checkbox > < mdb-checkbox [inline]="true" [checked]="true" [default]="true"> CheckBox 3 </ mdb-checkbox > </ div > |
app.component.ts
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent {} |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
Output:
Reference: https://mdbootstrap.com/docs/angular/forms/checkbox/