Bootstrap Bootstrap in Skeleton Update Project Setup Toggle [2] Dark Mode Add active class on SPA Services [7] Active Mock Mock in Skeleton Accordion Accordion 2 Swiper Play Video Swiper [2] SlidesPerView SlidesPerView Mobile Tabs TypeScript [1] Interfaces Components [1] Standalone Pipes [8] Currency Decimal Pipe Title Case Readmore Toggle Custom Pipes Safe HTML OrderBy Localize Date Template Syntax [2] Class Binding and ngClass Style Binding and ngStyle Data Binding [8] String Interpolation Property Binding Attribute Binding Class Binding Style Binding Event Binding Two-way Binding Navigation with Event Binding Events and Forms [2] Mouse Events and Manipulating State Toggling Values with an Event Buttons [5] Push Splice onChange trackBy Disabled Menu Routing [1] 404 Directives [10] ngFor ngIf ngClass ngStyle Safe Traversal Operator ngSwitchCase Built-in directives Attribute Directives Structural directives Custom Directives Click Events Models Observables [1] RxJS Forms [14] Template Driven Froms [10] Validation Styling Invalid Input Fields ngModel ngForm ngModelGroup Disable Button Checkbox Dropdown Radio Button Assignment Validation ngSubmit ngModelGroup Setting and patching form values Reactive Forms [11] Validation [2] Forbidden Names Can not contain space Custom Validation Asynchronous Validators Show Loader Image Validating on Submit Nested Form Groups FormArray – Todo List FormBuilder Focus Services, HTTP, Input & Output [1] Observables CRUD Operations [2] Getting Data Creating Data Input & Output [4] Parent to Child via @Input Child to Parent via Output and EventEmitter Child to Parent via ViewChild Share Data Between Any Components API [1] JSON Modules Filter PWA Unit Test Angular Universal Home / Dev Flames / Angular the Complete Guide (2022 Edition) / Toggle Add active class on SPA activeLink: string = ''; <a class="header-nav" (click)="activeLink = 'retro'" [class.active]="activeLink === 'retro'"> Retro </a> Doc navigation < Dark Mode Was this page helpful? Yes No