Angular MDBootstrap Forms Radio Component

Last Updated : 06 Jan, 2023

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 Forms Radio Component in Angular MDBootstrap.

A Radio Button Component is a component that allows a user to select one option from a list of given options, whereas a checkbox is used for selecting multiple options.

Properties:

checked: It takes a boolean value. It is used to change radio checked state
disabled: It takes a boolean value. It is used to change radio disabled state
Inline: It is used to group the various checkboxes or radio buttons in a row in a horizontal way.
Without Labels: It is used when no label text needs to specify.
Toggle buttons: It can be used to grouped the various toggle buttons in a button group.

Syntax:

<div class="form-check">
    <input mdbRadio class="form-check-input" 
           type="radio" 
           name="Radio"
           id="gfg1" />
    <label class="form-check-label" 
           for="gfg1">
        Radio 1
    </label>
</div>

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:

Project Structure

Example 1: This is the basic example that illustrates how to use the Forms Radio Component in Angular MDBootstrap.

app.component.html

<div id='gfg'> 
    <h1>GeeksforGeeks</h1> 
    <h4>Angular MDBootstrap Radio Component</h4> 
    <br /> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
        <label class="form-check-label" 
               for="gfg1"> 
             Radio 1  
        </label> 
    </div> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio"
               id="gfg1" /> 
        <label class="form-check-label" 
               for="gfg1">  
               Radio 2  
        </label> 
    </div> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
        <label class="form-check-label" 
               for="gfg1">  
               Radio 3  
        </label> 
    </div> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
  selector: 'my-app', 
  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 make an inline radio component in Angular MDBootstrap.

app.component.html

<div id='gfg'> 
    <h1>GeeksforGeeks</h1> 
    <h4>Angular MDBootstrap Radio Component</h4> 
    <br /> 
    <div class="form-check form-check-inline"> 
        <input mdbRadio class="form-check-input"
               type="radio" 
               name="Radio" id="gfg1" /> 
        <label class="form-check-label" 
               for="gfg1">  
               Radio 1  
        </label> 
    </div> 
    <div class="form-check form-check-inline"> 
        <input mdbRadio class="form-check-input"
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
        <label class="form-check-label" 
               for="gfg1">  
               Radio 2 
        </label> 
    </div> 
    <div class="form-check form-check-inline"> 
        <input mdbRadio class="form-check-input"
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
        <label class="form-check-label" 
               for="gfg1">  
               Radio 3  
        </label> 
    </div> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
  selector: 'my-app', 
  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 make a radio component without labels in Angular MDBootstrap.

app.component.html

<div id='gfg'> 
    <h1>GeeksforGeeks</h1> 
    <h4>Angular MDBootstrap Radio Component</h4> 
    <br /> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
    </div> 
    <br/> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
    </div> 
    <br/> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
    </div> 
    <br/> 
    <div class="form-check"> 
        <input mdbRadio class="form-check-input" 
               type="radio" 
               name="Radio" 
               id="gfg1" /> 
    </div> 
</div>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
  selector: 'my-app', 
  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{}