angular.txt

angular commands
****************

1)installation guide:

install nodejs: 
---------------

https://nodejs.org/en


install angular cli:
--------------------

npm install -g @angular/cli

create project:
--------------
ng new <project_name>

npx @angular/cli@16 new verra-dmrv-client-v16



component creation command:
***************************
ng generate component component-name    (ng g c component-name)

componentname standard: componentName    (pascalCase)


decorator:
**************

it tells angular about it is a component(identifying a class as a componennt)


@Component({
  selector: 'app-admin',
  imports: [],
  templateUrl: './admin.component.html',
  styleUrl: './admin.component.css'
})

selector: it used to find component uniquely

imports:helps what are the nodes needed

templateurl:it tells the template used

styleurl:it tells the styling file

How to import other component in main component?
************************************************

*)include component inside imports .ts file

*)<app-componame></app-componame> include in template file


How to create a single file component?
***************************************
just include app.component.ts


@Component({
  selector: 'app-user',
  imports: [],
  template: `<h1>hello iam user</h1>`,
  styles:[`
    h1 {
      color: red;
      font-family: Arial, sans-serif;
    }
  `]
})


How to import bootstrap in angular?
************************************

visit website: npmjs.org

npm i bootstrap



Data Binding?
**************

*)Types of Data Binding:1)Interpolation,2)Property Binding,3)Event Binding,4)Two-Way Binding


1)interpolation:

*first you should declare variable inside class

export class DataBindingComponent {

  name='Alan Sebastian';
  age:number=22;
}

*you have to place that inside the tag in template file

<h2>{{name}}</h2>
<p>{{age}}</p>

2)Property Binding:

*first you should declare variable inside class

export class DataBindingComponent {

  name='Alan Sebastian';
  age:number=22;
}

*)then include in tag

    <input type="text" [placeholder]="placeholder" >


3)Event binding:

*)first you stup a event
 submit(){
    alert("name submited successfully");
  }
*)then include in tag

<button (click)="submit()">Submit</button>

4)Two way binding:

*)inorder to apply two way binding first import formmodule
     
    imports: [FormsModule],
*)inside where you used provide [(ngModel)]
<input type="text" [(ngModel)]="name" placeholder="your name">


Structural Directives:
*********************
Structural directives modify the DOM’s structure by adding, removing, or replacing elements. They typically use an asterisk (*) syntax in templates.

ng-if:conditionally render or remove

*)first you need to import CommonModule or ngif

 imports: [CommonModule]

ng-for:ng-for is used to iterate through array or arrayObject

 <option *ngFor="let color of colorDetails" value="{{color.name}}">{{color.name}}</option>


Attribute Directives:
*********************

*)ng-class:
 ngClass is a directive in Angular that is used to dynamically add or remove CSS classes to an HTML element based on certain conditions. 
  
 in order to include ngclass first you need to import 'commonmodule' or 'ngclass' 

example:
export class NgClassComponent {

  displayColor:string="bg-success";


}
<div class="row" [ngClass]="displayColor">
    <div class="col-3">

        div 2

    </div>
</div>

*)ngStyle:ngStyle is a built-in directive that allows you to dynamically set inline CSS styles on an HTML element based on an object or expression.

in order to include ngclass first you need to import 'commonmodule'
example:

export class NgStyleComponent {

  divStyle={
    backgroundColor: 'red',
    color: 'black',
    padding: '10px'
  };

  onchange(color:string){
    this.divStyle.backgroundColor=color;
  }
  


<div class="row" [ngStyle]="divStyle">
    <div class="col-3">

        div 1

    </div>
</div>

<div class="row">
    <div class="col-3">

        <button class="bg-danger" (click)="onchange('red')">show red</button>
        <button class="bg-info" (click)="onchange('green')">show green</button>

    </div>
</div>


Routing:routing is used to navigate to  specific pages

*)setup path inside app.route.ts
 
export const routes: Routes = [
    
        { path: 'admin', component:AdminComponent},  // About page
  { path: 'databinding', component: DataBindingComponent} 
    
];

*)how to setup an default route

 { path: '', redirectto:'admin'},

*)Redirecting from one page to another

   <button routerLink="/ng-class" class="bg-primary">navigate to ng-class</button>