Angular Commands

Generate components in angular, usefull commands

ng g component <name>
ng g c

ng g directive <name>
ng g d

ng g guard <name>
ng g g

ng g interceptor <name>

ng g module <name>
ng g m

ng g pipe <name>
ng g p

ng g service <name>
ng g s

List of some commonly used Angular pipes

Angular provides a variety of built-in pipes that you can use to transform and format data in your templates. Here’s a list of some commonly used Angular pipes, along with examples of how to use them:

1. DatePipe: Formats a date object into a string representation based on the provided format.

   <!-- Example: Displaying the current date in a specific format -->
   {{ today | date: 'dd/MM/yyyy' }}

2. UpperCasePipe: Converts a string to all uppercase letters.

   <!-- Example: Converting a string to uppercase -->
   {{ 'Hello, Angular' | uppercase }}

3. LowerCasePipe: Converts a string to all lowercase letters.

   <!-- Example: Converting a string to lowercase -->
   {{ 'Hello, Angular' | lowercase }}

4. CurrencyPipe: Formats a number as currency, with options for specifying the currency code and formatting.

   <!-- Example: Displaying a number as currency -->
   {{ price | currency: 'USD':true }}

5. DecimalPipe: Formats a number as a decimal with options for specifying the number of digits and decimal places.

   <!-- Example: Displaying a number with 2 decimal places -->
   {{ value | number: '1.2-2' }}

6. PercentPipe: Formats a number as a percentage.

   <!-- Example: Displaying a number as a percentage -->
   {{ fraction | percent }}

7. JsonPipe: Converts a JavaScript object into a JSON string.

   <!-- Example: Displaying a JSON object as a string -->
   {{ data | json }}

8. AsyncPipe: Handles observables and promises and automatically subscribes/unsubscribes in the template.

   <!-- Example: Displaying the value of an observable -->
   {{ observableData | async }}

9. SlicePipe: Extracts a portion of an array or string.

   <!-- Example: Displaying the first 3 items of an array -->
   {{ arrayData | slice:0:3 }}

10. TitleCasePipe: Converts a string to title case (the first letter of each word is capitalized).
    <!-- Example: Converting a string to title case --> {{ 'hello world' | titlecase }}
    
11. I18nPluralPipe: Selects an output string according to the pluralization rules for a given locale.
    
    <!-- Example: Selecting a pluralized string based on a count --> {{ itemCount | i18nPlural: { '=0': 'No items', '=1': 'One item', 'other': '# items' } }}
    
12. I18nSelectPipe: Selects an output string based on a mapping of input values to output strings for a given locale.
    <!-- Example: Selecting an output string based on an input value --> {{ status | i18nSelect: { 'in-progress': 'Work in progress', 'completed': 'Task completed', 'pending': 'Task pending' } }}

Custom pipes can also be created if specific data transformation needs that are not covered by the built-in pipes.

Custom pipes allows to encapsulate and reuse data formatting logic in your Angular application.

List of Angular directives

Angular provides a variety of built-in directives that you can use to extend HTML and add dynamic behavior to your templates. Here’s a list of some commonly used Angular directives with examples:

1. ngIf: Conditionally renders an element based on a boolean expression.

   <div *ngIf="isUserLoggedIn">Welcome, User!</div>

2. ngFor: Iterates over a collection and generates HTML for each item.

   <ul>
     <li *ngFor="let item of items">{{ item }}</li>
   </ul>

3. ngSwitch: Conditionally renders content based on matching cases.

   <div [ngSwitch]="userRole">
     <div *ngSwitchCase="'admin'">Admin Dashboard</div>
     <div *ngSwitchCase="'user'">User Dashboard</div>
     <div *ngSwitchDefault>Guest Dashboard</div>
   </div>

4. ngClass: Adds or removes CSS classes based on conditions.

   <div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">Clickable Element</div>

5. ngStyle: Sets inline styles based on expressions.

   <div [ngStyle]="{ 'font-size.px': fontSize, 'color': fontColor }">Styled Text</div>

6. ngModel: Two-way data binding for form elements.

   <input [(ngModel)]="userName" placeholder="Enter your name">

7. ngIfElse: Provides an alternative template when ngIf condition is false.

   <div *ngIf="isUserLoggedIn; else notLoggedIn">Welcome, User!</div>
   <ng-template #notLoggedIn>Please log in to access the content.</ng-template>

8. ngTemplateOutlet: Renders the content of a named template.

   <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
   <ng-template #myTemplate><p>This is a custom template.</p></ng-template>

9. ng-container: A structural directive used for grouping elements without introducing an extra HTML element.

   <ng-container *ngFor="let item of items">
     <div>{{ item }}</div>
   </ng-container>

10. ngDisable: Disables or enables an element based on a condition.

<button [disabled]="isButtonDisabled">Click me</button>

10. ngSubmit: Used in forms to handle form submission.

<form (ngSubmit)="onFormSubmit()"> <!-- Form inputs go here --> <button type="submit">Submit</button> </form>

Angular also allows to create custom directives to extend HTML behavior.