Angular

What is Angular

Framework

Routing, HTTP, RxJS, etc.

Client side applications

  • Framework

Single page applications (SPA)

  • Framework
  • Client side applications

Organized Front-end structure

  • Framework
  • Client side applications
  • Single page applications (SPA)

Components, Modules, Services

TypeScript

  • Framework
  • Client side applications
  • Single page applications (SPA)
  • Organized Front-end structure

Angular CLI

  • Framework
  • Client side applications
  • Single page applications (SPA)
  • Organized Front-end structure
  • TypeScript

Not the same as AngularJs

  • Framework
  • Client side applications
  • Single page applications (SPA)
  • Organized Front-end structure
  • TypeScript
  • Angular CLI

TypeScript

Type annotations

  • Boolean
  • Number
  • String
  • Array
  • object
  • Any
  • Void
let isDone: boolean = false;

let decimal: number = 6;

let color: string = "blue";

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];


let text: string = 'This is the initial text';

const setText = (par: string) => text = par;

const returnText = (): string => {
    return 'This function returns a string'
};


let stringOrNumber: string | number = 'This is the initial text';

https://www.typescriptlang.org/docs/home.html

Want to know more about TypeScript?

Angular CLI

ng new name-of-app

ng generate component component-name

ng g c component-name

ng generate service service-name

ng g s service-name

ng generate module module-one

ng g m module-name

ng generate pipe pipe-one

ng g p pipe-name

ng serve

Event binding

<button (click)="firstClick()">Click me</button>
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  firstClick() {
    console.log('clicked');
  }

}

HTML

TypeScript

<div (focus)="myMethod()"></div>
<div (blur)="myMethod()"></div>
<div (submit)="myMethod()"></div>
<div (scroll)="myMethod()"></div>

<div (cut)="myMethod()"></div>
<div (copy)="myMethod()"></div>
<div (paste)="myMethod()"></div>

<div (keydown)="myMethod()"></div>
<div (keypress)="myMethod()"></div>
<div (keyup)="myMethod()"></div>

<div (mouseenter)="myMethod()"></div>
<div (mousedown)="myMethod()"></div>
<div (mouseup)="myMethod()"></div>

<div (click)="myMethod()"></div>
<div (dblclick)="myMethod()"></div>

<div (drag)="myMethod()"></div>
<div (dragover)="myMethod()"></div>
<div (drop)="myMethod()"></div>

NgIf

<div *ngIf="condition">
    Content to render when condition is true.
</div>

NgModel

<input type="text" ngModel name="name">
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    AddContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, // <--
    ReactiveFormsModule // <--
  ],
  providers: [],
  bootstrap: [AppComponent]
})

app.model.ts

<form #contactForm="ngForm" (ngSubmit)="submitForm(contactForm.value)">
   <div class="form-part">
     <label for="name">
       Name:
     </label>
     <input type="text" ngModel name="name" id="name" class="form-input" 
      placeholder="Name">
     
     <div *ngIf="showCompany">
       <label for="company">
         Company:
       </label>
       <input type="text" ngModel name="company" id="company" 
        placeholder="Company">
     </div>
     <input type="submit">
   </div>
</form>

Angular

By CodePamoja

Made with Slides.com

Angular

  • 20

More from CodePamoja