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 { message: string = "Lorem ipsum dolor sit amet," + "consectetur adipiscing elit. In at ante mattis," + "sollicitudin arcu id, dictum orci." + "Mauris laoreet tincidunt tellus vel faucibus." isDisabled:boolean = false; onClick(){ this.isDisabled = true; setTimeout(()=>{ this.message = "I am changed after 10 seconds on button click." }, 10000); } } app.component.html <h2 style="padding-top:25px; padding-bottom:25px;"> Angular - How to use setTimeout() </h2> <button (click)="onClick()" [disabled]="isDisabled" style="margin-bottom:20px; padding:12px;"> Change Text ...

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; isDisabled:boolean = false; timer:any; startCounting(){ this.counter = 0; this.isDisabled = true; // Repeat executing a function at a specified time interval. this.timer = setInterval(() => this.updateCounter(), 1000) } stopCounting(){ clearInterval(this.timer); this.isDisabled = false; } updateCounter(){ this.counter++; } } app.component.html <h2 style="padding-top:25px; padding-bottom:25px;"> Angular - How to use clearInterval() </h2> <button (click)="startCounting()" [disabled]="isDisabled" style="margin-bottom:20px; padding:12px;"> Start Counting (1 second interval) </...

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; isDisabled:boolean = false; onClick(){ this.isDisabled = true; // Repeat executing a function at a specified time interval. setInterval(() => this.updateCounter(), 1000) } updateCounter(){ this.counter++; } } app.component.html <h2 style="padding-top:25px; padding-bottom:25px;"> Angular - How to use setInterval() </h2> <button (click)="onClick()" [disabled]="isDisabled" style="margin-bottom:20px; padding:12px;"> Start Counting (1 second interval) </button> <h1>Counter : {{counter}}</h1> More Angular tutorials angular material - How to use query Progress bar angu...

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string = "Lorem ipsum dolor sit amet," + "consectetur adipiscing elit. In at ante mattis," + "sollicitudin arcu id, dictum orci." + "Mauris laoreet tincidunt tellus vel faucibus." onClick(){ this.delay(5).then(()=>{ this.message = "I am changed after 5 seconds on button click." } ); } delay(seconds:number) { return new Promise(resolve => setTimeout(resolve, seconds * 1000)); } } app.component.html <h2 style="padding-top:25px; padding-bottom:25px;"> Angular - How to do a task after a delay </h2> <button (click)="onClick()" style="margin-bottom:20px; padding:12px;"...

styles.css @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); * { font-family: 'JetBrains Mono', monospace !important; /* Add !important to overwrite all elements */ } app.component.html <h2 style="padding-top:25px; padding-bottom:25px;"> Angular - How to change default font </h2> <h3> <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at ante mattis, sollicitudin arcu id, dictum orci. Mauris laoreet tincidunt tellus vel faucibus.</i> Maecenas pulvinar sem quis metus dignissim posuere. Vestibulum lobortis eros a urna ullamcorper, ac ullamcorper felis semper. <b>Morbi in vulputate nisi. Nullam sagittis, quam sed tincidunt volutpat, est diam hendrerit ipsum, quis eleifend tellus urna eu urna. Nunc non tortor arcu. ...