HTML Code

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use mini FAB</h2> <h1>{{counter}}</h1> <div style="display:flex; justify-content:space-between; padding:20px;"> <button mat-mini-fab (click)="updateCounter()" aria-label="Basic material mini fab"> <mat-icon>lock</mat-icon> </button> <button mat-mini-fab color="primary" (click)="updateCounter()" aria-label="Primary color mini fab"> <mat-icon>cloudy</mat-icon> </button> <button mat-mini-fab color="accent" (click)="updateCoun...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use FAB</h2> <h1>{{counter}}</h1> <div style="display:flex; justify-content:space-between; padding:20px;"> <button mat-fab (click)="updateCounter()" aria-label="Basic material fab"> <mat-icon>cancel</mat-icon> </button> <button mat-fab color="primary" (click)="updateCounter()" aria-label="Primary color fab"> <mat-icon>delete</mat-icon> </button> <button mat-fab color="accent" (click)="updateCounter()" aria-label=...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use icon Button</h2> <h1>{{counter}}</h1> <div style="display:flex; justify-content:space-between; padding:20px;"> <button mat-icon-button (click)="updateCounter()" aria-label="Basic material icon button"> <mat-icon>settings</mat-icon> </button> <button mat-icon-button color="primary" (click)="updateCounter()" aria-label="Primary color icon button"> <mat-icon>settings</mat-icon> </button> <button mat-icon-button color="accent" ...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use flat Button</h2> <h1>{{counter}}</h1> <div style="display:flex; justify-content:space-between; padding:20px;"> <button mat-flat-button (click)="updateCounter()"> Basic Button </button> <button mat-flat-button color="primary" (click)="updateCounter()"> Primary Color </button> <button mat-flat-button color="accent" (click)="updateCounter()"> Accent Color </button> </div> <div style="display:flex; justify-content:space-between;...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use stroked Button</h2> <h1>{{counter}}</h1> <div style="display:flex; justify-content:space-between; padding:20px;background-color:gray;"> <button mat-stroked-button (click)="updateCounter()"> Basic Button </button> <button mat-stroked-button color="primary" (click)="updateCounter()"> Primary Color </button> <button mat-stroked-button color="accent" (click)="updateCounter()"> Accent Color </button> </div> <div style="display:fle...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use raised Button</h2> <h1>{{counter}}</h1> <div style="display:flex; justify-content:space-between; padding:20px;"> <button mat-raised-button (click)="updateCounter()"> Basic Button </button> <button mat-raised-button color="primary" (click)="updateCounter()"> Primary Color </button> <button mat-raised-button color="accent" (click)="updateCounter()"> Accent Color </button> </div> <div style="display:flex; justify-content:space-...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter: number = 0; updateCounter(){ this.counter++; } } app.component.html <h2>Angular Material - How to use basic Button</h2> <h1>{{counter}}</h1> <div> <button mat-button (click)="updateCounter()"> Basic Button </button> <button mat-button color="primary" (click)="updateCounter()"> Primary Color </button> <button mat-button color="accent" (click)="updateCounter()"> Accent Color </button> <button mat-button color="warn" (click)="updateCounter()"> Warn </button> <button mat-button di...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { randomNumber:number = -1; getRandomNumber(max:number){ this.randomNumber = Math.floor(Math.random() * max); } } app.component.html <h2>Angular - Call Function On Button Click</h2> <button (click)="getRandomNumber(100)" style="padding:12px;"> Get Random Number </button> <h3 *ngIf="randomNumber>=0"> {{randomNumber}} </h3> More Angular tutorials angular - How to use Button click event angular - Text input on change listener angular - How to get text input value angular - How to create a counter angular bootstrap - Rating hover event angular bootstrap - Readonly & editable Rating angular bootstrap - How to show Toast message a...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { counter:number = 0; countUp(){ this.counter++; } } app.component.html <h2>Angular Button Click Event</h2> <button (click)="countUp()" style="padding:12px;"> Count Up </button> <h3>{{counter}}</h3> More Angular tutorials angular - How to create function angular - Display value using interpolation angular - Interpolation JavaScript method angular - Interpolation call method angular - How to use if then condition angular - How to use if statement angular - Loop through an array of objects angular - How to use nested loop angular - How to call function on Button click angular - Text input on change listener angular - How to get text input valu...