Angular Introduction

Angular is a web framework that allows teams to deliver web app with confidence.

• Popular open source JavaScript/typescript framework.
• Allow to build dynamic, single-page application with ease
• Powerful feature & robust architecture.

Angular Framework Provides

• Two way data binding
• Dependency injection
• Component based architecture
• Excellent tooling support
• Seamless integration with other libraries
• Vibrant community of developers

How to Create First Angular Application
Follow given steps:
STEP 1:- Install Node JS:- download latest version of node from https://nodejs.org/en and install.(please refer given screen shot).

STEP 2:- Install Angular Cli:-  Run command

npm i -g @angular/cli

STEP 3:- Create New Project:- Run given command

ng new projectName (after run command, Please refer given screenshot).

STEP 4:- Run ng serve for development and ng build for creating build.

Features of Angular 17:-

• Easier Server Side Rendering (SSR)
• New control flow syntax(@if, @for, @switch)
• Deferrable views(@defer)
• More stable Singles
• Better build performance

Control Flow Syntax:- Template syntax which is used for adding the control statement.

• If Statement
  // Before Angular 17 (showUser is true)

     <div *ngIf="showUser; else hideUser">
          User exist
     </div>
     <ng-template #hideUser>
         User is not exist;
     </ng-template>

        // After Angular 17 (showUser is true)

   @if(showUser){
       User exist;
    }
    @else{
       User is not exist;
     }

• For Statement
  // Before Angular 17 (userlist = [{“username”:”Krishna”},{“username”:”Rudra”}])

     <ng-conatainer *ngFor="let user of userlist">
         {{user.username}}
     </ng-conatainer>
     <ng-container *ngIf="userlist.length === 0">
         Empty list of user  
     </ng-container>

        // After Angular 17 (userlist = [{“username”:”Krishna”},{“username”:”Rudra”}])

   @for(user of userlist){
       <p>{{user.username}}</p>
    }
    @empty{
       <p>Empty list of user</p>
     }

• Switch Statement
  // Before Angular 17 

     <div [ngSwitch]="role">
           <admin *ngSwitchCase="admin" />
           <moderator *ngSwitchCase="moderator" />
           <user *ngSwitchDefault" />
     </div>

        // After Angular 17 

   @switch(role){
      @case('admin') { <admin /> }
      @case('moderator') { <moderator /> }
      @default { <user /> }
   }

Deferrable Views:- A fancy name given to the Lazy-loading feature.
      // Before Angular 17 

const routes: Routes = [
      {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
      }
];

// After Angular 17 

<button type="button">Click me</button>
@defer(on interaction(loadButton)){
		
    } @placeholder {
        showed until the file not begin loaded
      } @loading {
        showed during the loading of the file data
      } @error {
        showed if any error happens during loading
      }
@place