Angular Basics I

Create new project

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
Navigate to http://localhost:4200/

Generate Component

ng generate component my-new-component
ng generate component simple-form —inline-template —inline-style
Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

Component Events

<button (click)="onClick()"> work with any scope
<input #myInput type=“text”> #myInput is the referece to this input

$event event listener

import { MailService } from './mail.service';
@Component({
  selector: 'app-simple-form',
  template: `
    <div>
    <input #myInput type="text">
    <button (click)="onClick($event, myInput.value)">Click me!</button>
    </div>
  `,
  styles: []
})
export class SimpleFormComponent implements OnInit {
  onClick(a){
    console.log(a);
  }
  constructor(private mail: MailService) { }

  ngOnInit() {
  }
}

Service

generate service ng generate service SERVICE-NAME
import { MailService } from './mail.service’; //app.module.ts
providers: [MailService],//app.module.ts
injecting service
- constructor(private mail: MailService){ }
provide and get data
- providers:[{provide: 'mail'}, useClass: MailService] //app.module.ts
- constructor(@Inject(‘mail’) private mail){ }// app.component.ts
- no need to import MailService class in component this time

ngFor loop

- `<li *ngFor="let message of mail.message">{{message}}</li>`

Input

- `simple-form.component.ts:` `@Input() info;`
- * app.component.html `<app-simple-form *ngFor=“let message of mail.messages” [info]=“message"></app-simple-form>`

Two-way binding

{{ info }}
<input #myInput type="text" [(ngModel)]=“info”> input content is sync with the

Output

data: simple-form => app => service
simple-form @Output() emitter = new EventEmitter()
- sendInfo(){ this.emitter.emit({text: this.info}); } info is input, emit info as $event to app
app
- <app-simple-form *ngFor="let message of mail.messages"[info]="message.text"(emitter)="onUpdate(message.id, $event.text)"></app-simple-form>
app.component.ts:
- onUpdate(id,text){ this.mail.updatefunc(id, text); console.log(id); }
mail.service.ts
- updatefunc(id, text){ this.messages = this.messages.map(m =\> m.id === id ? {id, text} : m )}

Property Binding

1 2	<div [class.special]="isSpecial">Special</div> <button [attr.aria-label]="help">help</button>

MVC: Model View Controller

Controller is the bridge of view and model
Model: contains data and method of interacting with data
dirty checking; Angular will check if any variable in the model has changed
$ marks Angualar object
model object:
- is the $scope object, can be accessed by View, and also interacted with Controller

Pipe

{{ name | uppercase}}
passing arguments to filter
- {{ 123.45678 | number : 2 }}
js: $scope
currency: {{ 123 | currency }}
- date: {{ today | date:’medium’ }}
filter : return subarray of a given array
- input string: compare all elements containing the string
- input object: compare same-named attribute
- input function: paser all elements with the function, return elements that returned true in the function
- {{ ['Ari','Lerner','Likes','To','Eat','Pizza’] | filter: ‘e’ }}
- orderBy (enforced para, optional para)
  - enforced para
    - function: getter method
    - String
    - array
  - optional para

1
2
3

app.controller('DemoController', ['$scope', '$filter',function($scope, $filter){
  $scope.name = $filter('lowercase')('Ari');
}])