feat: Add advanced examples for Angular features

src/app/examples/advanced/advanced-routings.ts

@@ -9,27 +9,27 @@ const ADVANCED_ROUTES: Route[] = [
  {
  path: 'example1',
  loadComponent: () =>
- import('./advanced-example1/advanced-example1.component').then(x => x.AdvancedExample1Component),
+ import('./example1/example1.component').then(x => x.AdvancedExample1Component),
  },
  {
  path: 'example2',
  loadComponent: () =>
- import('./advanced-example-2/advanced-example-2.component').then(x => x.AdvancedExample2Component),
+ import('./example2/example2.component').then(x => x.AdvancedExample2Component),
  },
  {
  path: 'example3',
  loadComponent: () =>
- import('./advanced-example3/advanced-example3.component').then(x => x.AdvancedExample3Component),
+ import('./example3/example3.component').then(x => x.AdvancedExample3Component),
  },
  {
  path: 'example4',
  loadComponent: () =>
- import('./advanced-example4/advanced-example4.component').then(x => x.AdvancedExample4Component),
+ import('./example4/example4.component').then(x => x.AdvancedExample4Component),
  },
  {
  path: 'example5',
  loadComponent: () =>
- import('./advanced-example5/advanced-example5.component').then(x => x.AdvancedExample5Component),
+ import('./example5/example5.component').then(x => x.AdvancedExample5Component),
  },
  {
  path: 'example6',

src/app/examples/advanced/advanced-example1/advanced-example1.component.ts → src/app/examples/advanced/example1/example1.component.ts

@@ -13,8 +13,8 @@ import { RouterModule } from '@angular/router';
  selector: 'app-advanced-example1',
  standalone: true,
  imports: [MatButtonModule, MatTabsModule, MatCardModule, MatIconModule, MarkdownComponent, RouterModule],
- templateUrl: './advanced-example1.component.html',
- styleUrl: './advanced-example1.component.scss'
+ templateUrl: './example1.component.html',
+ styleUrl: './example1.component.scss'
 })
 export class AdvancedExample1Component {
  private readonly http = inject(HttpClient);

src/app/examples/advanced/example10/example10.component.scss

@@ -21,7 +21,6 @@
  }
  button {
  padding: 0.5rem 1rem;
- border: none;
  border-radius: 4px;
  cursor: pointer;
  }

src/app/examples/advanced/advanced-example-2/advanced-example-2.component.ts → src/app/examples/advanced/example2/example2.component.ts

@@ -7,11 +7,11 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconModule } from '@angular/material/icon';
 import { MarkdownModule } from 'ngx-markdown';
 import { Observable } from 'rxjs';
-import { AdvancedExample2Service } from './advanced-example-2.service';
+import { AdvancedExample2Service } from './example2.service';
 import { RouterModule } from '@angular/router';
 
 @Component({
- selector: 'app-advanced-example-2',
+ selector: 'app-advanced-example2',
  standalone: true,
  imports: [
  CommonModule,
@@ -22,8 +22,8 @@ import { RouterModule } from '@angular/router';
  MarkdownModule,
  RouterModule
  ],
- templateUrl: './advanced-example-2.component.html',
- styleUrls: ['./advanced-example-2.component.scss']
+ templateUrl: './example2.component.html',
+ styleUrls: ['./example2.component.scss']
 })
 
 export class AdvancedExample2Component {

src/app/examples/advanced/advanced-example3/advanced-example3.component.ts → src/app/examples/advanced/example3/example3.component.ts

@@ -1,6 +1,5 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgIf, NgForOf } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
@@ -18,9 +17,9 @@ import { RouterModule } from '@angular/router';
 @Component({
  selector: 'app-advanced-example3',
  standalone: true,
- imports: [CommonModule, NgIf, NgForOf, MatButtonModule, MatTabsModule, MatCardModule, MatIconModule, MarkdownComponent, ShowOnEvenDirective, RouterModule],
- templateUrl: './advanced-example3.component.html',
- styleUrl: './advanced-example3.component.scss'
+ imports: [CommonModule, MatButtonModule, MatTabsModule, MatCardModule, MatIconModule, MarkdownComponent, ShowOnEvenDirective, RouterModule],
+ templateUrl: './example3.component.html',
+ styleUrl: './example3.component.scss'
 })
 export class AdvancedExample3Component {
  // Signal for login state (Conditional Rendering tab)

src/app/examples/advanced/advanced-example4/advanced-example4.component.html → src/app/examples/advanced/example4/example4.component.html

@@ -2,7 +2,7 @@
  <div class="flex flex-wrap gap-2 items-center justify-start mt-4 mb-4">
  <button mat-stroked-button color="primary" routerLink="/advanced">Go to List</button>
  <button mat-stroked-button color="primary" [routerLink]="'/advanced/example3'">Prev</button>
- <button mat-stroked-button color="primary" [routerLink]="'/advanced/example4'">Next</button>
+ <button mat-stroked-button color="primary" [routerLink]="'/advanced/example5'">Next</button>
  </div>
 
  <mat-tab-group>

src/app/examples/advanced/advanced-example4/advanced-example4.component.spec.ts → src/app/examples/advanced/example4/example4.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { AdvancedExample4Component } from './advanced-example4.component';
+import { AdvancedExample4Component } from './example4.component';
 
 describe('AdvancedExample4Component', () => {
  let component: AdvancedExample4Component;

src/app/examples/advanced/advanced-example4/advanced-example4.component.ts → src/app/examples/advanced/example4/example4.component.ts

@@ -11,7 +11,6 @@ import { DisableControlDirective } from './disable-control.directive';
 
 @Component({
  selector: 'app-advanced-example4',
- standalone: true,
  imports: [
  CommonModule,
  ReactiveFormsModule,
@@ -25,8 +24,8 @@ import { DisableControlDirective } from './disable-control.directive';
  JsonPipe,
  DisableControlDirective
  ],
- templateUrl: './advanced-example4.component.html',
- styleUrls: ['./advanced-example4.component.scss']
+ templateUrl: './example4.component.html',
+ styleUrls: ['./example4.component.scss']
 })
 export class AdvancedExample4Component {
  private fb = inject(FormBuilder);

src/app/examples/advanced/advanced-example5/auto-save-form-demo.component.html → src/app/examples/advanced/example5/auto-save-form-demo.component.html

@@ -12,11 +12,19 @@
  <textarea formControlName="notes"></textarea>
  </label>
  <div class="status">
- <ng-container [ngSwitch]="savingStatus()">
- <span *ngSwitchCase="'saving'">Saving...</span>
- <span *ngSwitchCase="'saved'">✅ Saved</span>
- <span *ngSwitchCase="'error'">❌ Error! Retrying...</span>
- <span *ngSwitchDefault>Idle</span>
- </ng-container>
+ @switch (savingStatus()) {
+ @case ('saving'){
+ Saving...
+ }
+ @case ('saved'){
+ ✅ Saved
+ }
+ @case ('error'){
+ ❌ Error! Retrying...
+ }
+ @default{
+ Idle
+ }
+ }
  </div>
 </form>

src/app/examples/advanced/advanced-example5/advanced-example5.component.html → src/app/examples/advanced/example5/example5.component.html

@@ -2,7 +2,7 @@
  <div class="flex flex-wrap gap-2 items-center justify-start mt-4 mb-4">
  <button mat-stroked-button color="primary" routerLink="/advanced">Go to List</button>
  <button mat-stroked-button color="primary" [routerLink]="'/advanced/example4'">Prev</button>
- <button mat-stroked-button color="primary" disabled>Next</button>
+ <button mat-stroked-button color="primary" [routerLink]="'/advanced/example6'">Next</button>
  </div>
 
  <mat-tab-group>

src/app/examples/advanced/advanced-example5/advanced-example5.component.ts → src/app/examples/advanced/example5/example5.component.ts

@@ -1,6 +1,6 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormsModule, FormBuilder, Validators } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
@@ -26,7 +26,7 @@ import { AutoSaveFormDemoComponent } from './auto-save-form-demo.component';
  AutoSaveFormDirective,
  AutoSaveFormDemoComponent
  ],
- templateUrl: './advanced-example5.component.html',
- styleUrls: ['./advanced-example5.component.scss']
+ templateUrl: './example5.component.html',
+ styleUrls: ['./example5.component.scss']
 })
 export class AdvancedExample5Component {}