Category: Example

Angular’s dependency injection is already being used in the UserService and components. Ensure you are following Angular’s best practices, such as:

• Providing services in the root injector or a specific module’s provider array.
• Using @Injectable({ providedIn: 'root' }) for services to ensure they are singletons.

Custom Directive

Create a custom directive to highlight text:

ng generate directive highlight

Implement the directive in src/app/highlight.directive.ts:

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}

Use it in a component template:

<p appHighlight>This text will be highlighted on hover.</p>

Custom Pipe

Create a custom pipe to transform text to uppercase:

ng generate pipe uppercase

Implement the pipe in src/app/uppercase.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'uppercase'
})
export class UppercasePipe implements PipeTransform {

  transform(value: string): string {
return value.toUpperCase();
  }
}

Use it in a component template:

<p>{{ 'hello world' | uppercase }}</p>

Enhance the UserComponent to allow for two-way data binding and interaction with the form:

// src/app/user/user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',
  template: `
<h1>User List</h1>
<ul>
  <li *ngFor="let user of users">
    {{ user.name }} ({{ user.email }})
  </li>
</ul>
<a routerLink="/add-user">Add New User</a>
  `
})
export class UserComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
this.userService.getUsers().subscribe(data => {
  this.users = data;
});
  }
}

Let’s add a form to the UserComponent to allow adding new users. We’ll use Angular’s Reactive Forms module for this purpose.

Generate a New Component

ng generate component add-user

Import ReactiveFormsModule

Update src/app/app.module.ts to import ReactiveFormsModule:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ReactiveFormsModule
  ],
})
export class AppModule { }

Create the Add User Form

Modify src/app/add-user/add-user.component.ts to create a form:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../user.service';

@Component({
  selector: 'app-add-user',
  template: `
<h1>Add User</h1>
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input id="name" formControlName="name">
  <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched">
    Name is required.
  </div>
  
  <label for="email">Email:</label>
  <input id="email" formControlName="email">
  <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched">
    Valid email is required.
  </div>
  
  <button type="submit" [disabled]="userForm.invalid">Add User</button>
</form>
  `
})
export class AddUserComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) {
this.userForm = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]]
});
  }

  onSubmit() {
if (this.userForm.valid) {
  this.userService.addUser(this.userForm.value).subscribe(() => {
    alert('User added successfully!');
    this.userForm.reset();
  });
}
  }
}

Add a Method to UserService

Update src/app/user.service.ts to include a method for adding users:

addUser(user: any): Observable<any> {
  return this.http.post<any>(this.apiUrl, user);
}

Add Route for Add User Component

Update src/app/app-routing.module.ts:

import { AddUserComponent } from './add-user/add-user.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'user', component: UserComponent },
  { path: 'add-user', component: AddUserComponent }
];

Modify src/app/app.component.html to include navigation and the router outlet:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/user">Users</a>
</nav>

<router-outlet></router-outlet>

Home Component

// src/app/home/home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: <h1>Welcome to the Home Page</h1>
})
export class HomeComponent { }

About Component

// src/app/about/about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: <h1>About Us</h1><p>This is the about page.</p>
})
export class AboutComponent { }

User Component

// src/app/user/user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',
  template: `
<h1>User List</h1>
<ul>
  <li *ngFor="let user of users">
    {{ user.name }} ({{ user.email }})
  </li>
</ul>
  `
})
export class UserComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
this.userService.getUsers().subscribe(data => {
  this.users = data;
});
  }
}

Import HttpClientModule in your AppModule:

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [
AppComponent,
HomeComponent,
AboutComponent,
UserComponent
  ],
  imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implement a basic UserService to fetch user data:

// src/app/user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any[]> {
return this.http.get&lt;any&#91;]>(this.apiUrl);
  }
}

Modify src/app/app-routing.module.ts to set up routing for your application:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'user', component: UserComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Generate a few components and a service for demonstration:

ng generate component home
ng generate component about
ng generate component user
ng generate service user