- Component
- Directive
- Pipe
- Service
- Module
- Class
- Interface
- Enum
- Guard
- Interceptor
- Application
- Library
- Webpack Configuration
Angular provides a powerful set of tools to help you build scalable, maintainable web applications. Understanding when to use each of these elements can improve your development process and help you write cleaner, more modular code.
Below is a breakdown of the 13 Angular elements you can generate using ng generate, along with a simple explanation and a code example for each.
1. Component (ng generate component <name>)
Use it when: You need to create a visual element with its own logic, HTML template, and styles.
Example: Display a user's profile details.
ng generate component user-profile// user-profile.component.ts
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html'
})
export class UserProfileComponent {
@Input() user: any;
}2. Directive (ng generate directive <name>)
Use it when: You want to change the appearance or behavior of an existing element.
Example: Highlight an element on hover.
ng generate directive highlight// highlight.directive.ts
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}3. Pipe (ng generate pipe <name>)
Use it when: You need to format or transform data in a template.
Example: Convert a date to local format.
ng generate pipe date-format// date-format.pipe.ts
@Pipe({ name: 'dateFormat' })
export class DateFormatPipe implements PipeTransform {
transform(value: string): string {
return new Date(value).toLocaleDateString();
}
}4. Service (ng generate service <name>)
Use it when: You want to handle shared logic or data fetching across components.
Example: Authenticate a user.
ng generate service auth// auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
login(username: string, password: string) {
return this.http.post('/api/login', { username, password });
}
constructor(private http: HttpClient) {}
}5. Module (ng generate module <name>)
Use it when: You want to organize related code together and support lazy loading.
Example: Create a module for user-related features.
ng generate module user// user.module.ts
@NgModule({
declarations: [UserProfileComponent],
imports: [CommonModule],
exports: [UserProfileComponent]
})
export class UserModule {}6. Class (ng generate class <name>)
Use it when: You need a generic TypeScript class not tied to Angular structures.
Example: Define a class to represent a user.
ng generate class models/User// user.ts
export class User {
constructor(
public id: number,
public name: string,
public email: string
) {}
}7. Interface (ng generate interface <name>)
Use it when: You want to define the structure of an object for type safety.
Example: Define the shape of a user object.
ng generate interface models/User// user.ts
export interface User {
id: number;
name: string;
email: string;
}8. Enum (ng generate enum <name>)
Use it when: You want to define a set of named constants.
Example: Create an enum for user roles.
ng generate enum user-role// user-role.enum.ts
export enum UserRole {
Admin = 'Admin',
User = 'User',
Guest = 'Guest'
}9. Guard (ng generate guard <name>)
Use it when: You need to control access to a route.
Example: Restrict access to a dashboard if the user is not authenticated.
ng generate guard auth// auth.guard.ts
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(): boolean {
if (!this.authService.isLoggedIn()) {
this.router.navigate(['/login']);
return false;
}
return true;
}
}10. Interceptor (ng generate interceptor <name>)
Use it when: You want to modify or log HTTP requests and responses globally.
Example: Add a token to every HTTP request.
ng generate interceptor auth// auth.interceptor.ts
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer YOUR_TOKEN') });
return next.handle(authReq);
}
}11. Application (ng generate application <name>)
Use it when: You’re building a new app inside an Angular workspace (monorepo).
Example: Add a new admin dashboard app.
ng generate application admin-dashboard// angular.json excerpt
{
"projects": {
"admin-dashboard": {
"root": "projects/admin-dashboard",
"projectType": "application"
...
}
}
}12. Library (ng generate library <name>)
Use it when: You want to build reusable components, directives, or services.
Example: Create a shared UI library.
ng generate library shared-ui// public-api.ts
export * from './lib/button/button.component';
export * from './lib/shared-ui.module';13. Webpack Configuration (ng generate webpack-config <name>)
Use it when: You need advanced build customization beyond Angular CLI defaults.
Example: Add custom aliases or loaders.
ng generate webpack-config custom// webpack.config.js
module.exports = {
resolve: {
alias: {
'@shared': path.resolve(__dirname, 'src/app/shared')
}
}
};Summary:
- Component: UI building blocks.
- Directive: Add behavior to elements.
- Pipe: Format displayed data.
- Service: Share logic and data.
- Module: Group related code.
- Class: Generic business logic or data structures.
- Interface: Define data shapes.
- Enum: Declare constant sets.
- Guard: Protect routes.
- Interceptor: Modify HTTP requests/responses.
- Application: Create a new Angular app.
- Library: Create shared functionality.
- Webpack Configuration: Customize the build process.
Knowing when to use each Angular element can help you write clearer, more maintainable code and structure your application more efficiently.