How to use mat-radio-button Angular

Create angular project

To create an Angular project, follow these steps:

1. Install Node.js: Angular requires Node.js and npm (Node Package Manager) to be installed on your machine. Visit the official Node.js website (https://nodejs.org) and download the latest LTS version suitable for your operating system. Follow the installation instructions.

2. Install Angular CLI: Angular CLI (Command Line Interface) is a powerful tool that simplifies the process of creating and managing Angular projects. Open a terminal or command prompt and run the following command to install Angular CLI globally:

npm install -g @angular/cli

3. Create a new Angular project: Once Angular CLI is installed, you can create a new Angular project using the ng new command. Navigate to the directory where you want to create your project using the cd command, and then run the following command:

ng new my-angular-project

4. Replace my-angular-project with the name you want to give to your project. Angular CLI will generate a new project structure with all the necessary files and dependencies. Navigate to the project directory: After the project is created, navigate to the project directory using the cd command:

cd my-angular-project

5. Serve the application: To see your Angular project in action, you can use the Angular CLI's development server. Run the following command to start the server:

ng serve

This will compile the project and launch a development server. Open your web browser and visit http://localhost:4200 to see your Angular application.

Congratulations! You have successfully created an Angular project. You can now start building your application by modifying the files in the project structure, including the main HTML template (src/index.html) and the root component (src/app/app.component.ts). Refer to the official Angular documentation (https://angular.io/docs) for more information on how to work with Angular and build powerful web applications.

Angular material

1. Install required dependencies: Install the necessary dependencies for autocomplete functionality. You'll need @angular/material and @angular/cdkfor the autocomplete component. Run the following command to install them:

npm install @angular/material @angular/cdk

Style

Add this link to style css file style.css

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Radio-button label

The radio-button label is provided as the content to the <mat-radio-button> element. The label can be positioned before or after the radio-button by setting the labelPosition property to 'before' or 'after'.

To use the mat-radio-button component in Angular, you need to follow these steps:

1. Import required modules: Open the app.module.ts file located in the autocomplete folder and import the necessary modules from @angular/material and @angular/forms. Your imports should look like this:

2. Import the required modules: In your Angular module file (e.g., app.module.ts), import the necessary Angular Material modules. You'll need to import MatRadioModule from @angular/material/radio and MatButtonModule from @angular/material/button.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {NgFor} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {MatRadioModule} from '@angular/material/radio';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatRadioModule, 
    FormsModule, 
    NgFor
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App component html

Use the mat-radio-button component in your template: In your component's HTML template, you can now use the mat-radio-button component to create radio buttons. You'll typically use it within a mat-radio-group container to group related options. Here's an example:

app.component.html

<div class="content" role="main">
  <label id="example-radio-group-label">Pick your favorite season</label>
  <mat-radio-group color="warn"
    aria-labelledby="example-radio-group-label"
    class="example-radio-group"
    [(ngModel)]="favoriteSeason">
    <mat-radio-button class="example-radio-button"
      *ngFor="let season of seasons" [value]="season">
      {{season}}
    </mat-radio-button>
  </mat-radio-group>
  <h1>Your favorite season is: {{favoriteSeason}}</h1>
</div>

App component ts

Handle radio button selection: In your component class, define a property (e.g., favoriteSeason) to store the selected value of the radio button. You can use [(ngModel)] to bind the selected value to this property. In the example above, favoriteSeason is bound to the mat-radio-group using [(ngModel)]="favoriteSeason".

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  favoriteSeason!: string;
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}

App component css

Open the app.component.css file and start writing your custom CSS code. You can define styles for specific elements or create your own classes.

For example, let's say you want to change the background color of a specific page. You can add the following code to app.component.css:

app.component.css

.example-radio-group {
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    align-items: flex-start;
  }
  
  .example-radio-button {
    margin: 5px;
  }

The above code sets up a basic implementation of mat-radio-button in Angular. You can customize the appearance and behavior further by utilizing Angular Material's theming and styling options. Make sure to refer to the official Angular Material documentation for more advanced usage and additional features of the mat-radio-button component.