feat: Add advanced examples for Angular features

- Implemented Advanced Example 2 with user fetching and display. - Created Advanced Example 3 showcasing ng-template use cases including conditional rendering, template outlets, context passing, and custom directives. - Developed Advanced Example 4 demonstrating signal-based control for reactive forms. - Introduced Advanced Example 5 featuring an auto-save form directive with local storage integration. - Added necessary styles, templates, and services for each example. - Included unit tests for the new components and directives.

Author: sonusindhu

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.html renamed to src/app/examples/advanced/example1/example1.component.html

@@ -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/advanced-example1/advanced-example1.component.scss renamed to src/app/examples/advanced/example1/example1.component.scss

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

src/app/examples/advanced/advanced-example1/advanced-example1.component.ts renamed to src/app/examples/advanced/example1/example1.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 {