Skip to content

Instantly share code, notes, and snippets.

@MarkNewcomb1
Last active October 8, 2018 22:44
Show Gist options
  • Select an option

  • Save MarkNewcomb1/8e5ad0cd111708fc43462001917351f4 to your computer and use it in GitHub Desktop.

Select an option

Save MarkNewcomb1/8e5ad0cd111708fc43462001917351f4 to your computer and use it in GitHub Desktop.
Angular notes

*ngIf - structural directive (meaning it affects what's output in the DOM) that's conditional on a expression evaluating to true

*ngFor - structural directive (meaning it affects what's output in the DOM) that's conditional on how many elements to loop through and render there are.

lifecycle hooks - as Angular initializes, it goes through certain phases.

First is ngOnChanges - when properties receive new values

ngOnInit - runs after the constructor - once component is initialized (but not added to the DOM) - basically once the object's created

ngAfterViewInit - once the view has been rendered - we can read values in the DOM.

ngOnDestroy - once it's about to be destroyed (so just before)

passing properties down to child components using the @Input annotation

parent would be

<app-child [childMessage]="parentMessage"></app-child>

and child would receive it as

@Input() childMessage: string;

getting properties from child components using the @ViewChild annotation

child wouldn't use @Input - it would just declare its value as message = 'Hola Mundo!';

and then the parent would have its template as

Message: {{ message }}
    <app-child></app-child>

and also in the parent you'd need to call ngAfterViewInit since the child won't available until after the view's been initialized. Like so, in the parent component:

ngAfterViewInit() {
    this.message = this.child.message
  }

@Injectable: objects that depend on other objects

Forms module - used with data binding, like for an input type text

how the app.module works - the root application that declares all the components and all the imports

subscribing to observables - used in api calls - uses the HttpModule, and "subscribes" to an observable to fetch data from another resource

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