Angular

*ngFor

*ngFor="let item of items; let i = index" then you can iterate over i, like i>=4 in your conditional statements

selectors

- a unique HTML tag that we can use to reference in the template

structural directive

- instructions that change the structure of the DOM - alter layout by adding, removing, and replacing elements in the DOM ex.) *ngFor="let hero of heroes" ex.) *ngIf

property binding

- want to dynamically bind some property within an HTML element - ex) [disabled]="", means that we are directly binding to the native disabled property this HTML element has. passes the value from the parent to the property of the child component. we pass in the property name like [disabled]="!allowNewServer" which returns a boolean value <app-hero-detail [hero]="selectedHero"></app-hero-detail> The [hero] property binding passes the value of selectedHero from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

3 kinds of directives

1. components: directives with a template 2. structural directives: change the DOM layout by adding and removing DOM elements. 3. attribute directives: changes the APPEARANCE/behavior of an element, component, or other directive

ngModule

Angular uses modules to bundle different pieces (components) into packages -mainly appmodule - you have to register the component within the module in the declarations array or else Angular won't know it exists. Then you also have to import it within the declaration or else it won't know where to find this file

Observable

Angular uses rxJS observables instead of promises for async operations for making HTTP requests. observables are open data streams. when we make an HTTP request, we return an observable and then subscribe to that observable in that component

example of 2 way data binding

Input [(ngModel)]: data property value flows to the input box from the component, and the user's changes also flow back to the component, resetting the property to the latest value, as with event binding

Two way data binding

Where we are able to react to events AND output something at the same time Helps users exchange data from the component to the template and from the template to the component. - achieved by using an ngModel directive (ex. checkbox / toggle switch, inputs) - make sure you import formsmodule

constructor (within a class)

a built in function every class has and which will be executed once you create a new instance of this class it takes in arguments and in the body of the constructor, you assign the arguments to properties of the class

Component

a class so that Angular is able to instantiate it to create objects based on the blueprint we set up

what does @output do?

allows parent components using this component to listen to your own events which you created with new eventEmitter. child component has an EventEmitter that EMITS the event up to the parent component when the button is clicked. the parent component listens to the DOM/output event and handles the implementation

Data-binding

communication between your business logic of your component (typescript code) and the template (HTML / what the user sees) works with PROPERTIES of DOM elements, components, and directives, NOT HTML attributes

@Input

decorator that marks a class field as an input property. the input property is bound to a DOM property in the template. by default, all properties of components are only accessible inside these components, not by outside. so we have to explicitly state which properties we want to be exposed, so that they can be accessible by parent components. parent components can bind to their child components via @input decorators! the child component gets INSERTED into a parent component - binding to own properties

attribute directives

don't add or remove elements, they only change the ELEMENT they were placed on - [ngStyle], we use property binding. binding to the property of the directive - [ngClass]

what 3 methods does an observable emit

emits 3 methods: - next() - error() - complete()

observer

emits some code any time there is a change in value (receive new value, an error, or if observable reports that it's done)

model

file that is a blueprint for objects we create. we create a model by using a Typescript class. a class can be instantiated, so we can create new objects based on the setup we provide i the class

local references

get access to some features in your template, which you can use directly within the template or to pass into the typescript code

what does @input do?

gives the ability to make your PROPERTIES bindable from the outside (from the PARENT component)

how to pass data from child to parent @Output

how to inform the parent component that something changed fa you can listen for events as properties with event binding we pass something from out of the component

lifecycle hooks

if a new component is instantiated, angular goes through a couple of stages in this process. angular gives us the opportunity to HOOK into these different stages to execute some code. ngOnChanges ngOnInit ngDoCheck: every change detection run ngAfterContentInit ngOnDestroy: called once the component is about to be destroyed

directives

instructions in the DOM examples) components. components instruct angular to add the content of our component template and the business logic in this place where we use the selector. components are directives with a template, but there are directives without a template -added by using an attribute selector - *ngIf, *ngFor, ngStyle, ngClass

observables pt 2

it is a wrapper around a stream of values rxjs is a library that lets us create and work with observables. we can subscribe to an observable chain and get a callback every time something is pushed onto the last stream Reactive forms in Angular expose an observable, a stream of all the input fields in the form combined.

Interpolation

lets you render the property string value as text within the template (markup). Angular replaces the component's property name with the string value of the corresponding component property - always has to return a string, you can even insert a method that returns a string

ngOnInit

lifecycle hook called once the component is initialized, when the component isn't even loaded yet. properties can be accessed here ngOnInit runs after the constructor

Decorators

metadata added to our code,tells us our selector, templateUrl, and styleURls identifies the class immediately below it as a component class

Event emitter

object in angular which allows you to emit your own events

string interpolation

outputting data from the component to the template

@ViewChild()

requires an argument, it's the selector of the element. you can pass in a local reference

*ngIf

structural directive that has to return true or false

subscribe

takes 2 arguments, a list of functions, or an object which has those methods

template expression

the text inbetween the curly braces when you attempt to do interpolation

event binding

the way we react to user events from the template, ex) click event to execute something

[]

used for Input and specific DOM element attributes

()

used for output and DOM events

constructor

used to import any services you may want to use