Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular 2-7 notes

CLI

*ng new project name

  • ng g c folder/module-folder-name --spec false

model:

routing

app.module

import { Routes } from "@angular/router";

const appRoutes: Routes = [
  { path: '', component: Index, }
  { path: 'register', component: , }
  { path: 'register', component: , }
];

https://angular.io/guide/feature-modules

ng g module collector

ng g c collector/donors --module=collector --spec false

ng g c donors/register --module=donors --spec false

https://material.angular.io/components/tabs/overview https://github.com/angular/flex-layout

Notes from https://www.youtube.com/watch?v=rKjXliC2Wgo&t=65s

Alain Chautarde. @AlainChautard

AhgularJS was (1.x) from 2012 to 2016 - Releases from time to time

Ahgular JS era (2.x) - Celar, predictable schedule New version on every 6 months;

2.0, 4.0, 5.0 - 2017 6.0, 7.0 8.0 - 2018

Support per 1 year and half; All major version have a 1 year LTS after inital 6 months; Minor version every month; Path version happen every week;

Some projects: Angular CLI, Angular NX, Angular Fire,

HttpClient

Services;

Depency Injectable;

@componsen({ providers: [LoggingService] })

Data Service

Hierarchical Injecto

AppModule - providers: [];

AppComponent - providers: [];

Any other Component - providers: [];

@Injectable() - from @angular/core

Using services for Cros-component Communication

statusUpdated = new EventEmitrrer();

Databinding

String interpolation

{{ propertieName }} {{ methodName() }} {{ 'propertieName' }}

Property binding

[disable]="isServerDisable"

String interpolatio vs Property binding

To show data use String interpolation {{}}

To reference property use property binding []

Event Binding

(click)="eventName()"

Important: FormsModule is Required for Two-Way-Binding!

Seção 2, aula 29 Important: For Two-Way-Binding (covered in the next lecture) to work, you need to enable the ngModel directive. This is done by adding the FormsModule to the imports[] array in the AppModule.

You then also need to add the import from @angular/forms in the app.module.ts file:

import { FormsModule } from '@angular/forms';

Two ways data binding

<input type="text" [(ngModel)]="propertyName" />

Observables

rxjs

Directives

Instructions in the DOM

https://augury.rangle.io/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment