- App Component
- In order for you to pass properties from parents to child, you need to use Input decorator in order to perform properties binding
- Input - to pass state to component
- Output- to raise event from custom component,
- @Input('is-favourite') - we can use alias to change the input name on template
- ngcontent
- If we want to create an reusable component, we can use ng content
- If we want to render something without putting it inside a div or other kind of html elememt, we can use
ngcontainermark up
- Directives
- Structural - modify the structure of the DOM
- Attribute - modify the attributes of DOM element
- *ngIf, hidden
- The difference between 2 of them is, when ngIf is evaluated as falsie, the element is removed from the dom
- whereas when you use hidden attribute, the element is just display: hide
- *ngSwitch
- *ngIf evaluate booolean, whereas ngswitch evaluate string
- *ngFor
- when we render a list of dom, a new list is rerender. Sometimes, the content of the list are the same, however angular will treat it as a new list
- therefore, we can use TrackBy event from ngFor to track the object, code added show how we track the list by its id, and now the course id is track, list is no more render when we load the list
- ngClass
- ngClass we use to render a class based on some expression
- same as how it works as classbinding
- custom derivative
- code applied demonstrate on how to make a custom derivative
- hostListener decorator used to subscribe to the event raised by the dom object
- Form
- We need to initialize form-group and form-control by given a class name
- Ng Model .ng-touched
- As you can see while we applied ngModel to our form, we can access and utilise the .ng-touched .ng-pristine class
- Ng Model radio button
- remember ngModel need to associate with name
- Drop down list
- for the value attribute we will get the string, in order to get the object value we can use
[ngValue]="method" - we can add multiple inside select element
- Reactive Form
- In template form, we use HTML Valiation, however in reactive form, we use validators
- FormControl(formState: initialState, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent