Angular Concepts
DATA COMMUNICATION:
(1) String Interpolation is used for outputting variables.
Syntax: {{*var name / func name*}}
(2) Property Binding is used for setting an HTML attribute as a variable / function.
Syntax: [*attribute name*] = "variable / function"
(3) Event Binding is used to listen for a specific event and then execute a variable / function.
Syntax: [*event name*] = "variable / function"
(4) Two-Way Data Binding is used to change the value of a variable in both the typescript and HTML.
Syntax: [{*special directive(eg. ngModel)*}] = "variable / function"
DIRECTIVES (used as attributes only):
IT IS NOT POSSIBLE TO ADD MORE THAN 2 STRUCTURAL DIRECTIVES TO ONE ELEMENT.
(1) structural ngIf is used for displaying an element conditionally.
Syntax: ngIf = "variable / function"
(2) structural ngElse is used for displaying an element if ngIf is not satisfied. Syntax: nest element to be disp. in <ng-template> and add id.
Change to: ngIf = "variable / function; else id-of-Element"
(3) attribute ngStyle is used for dynamically changing an element's styling.
Syntax: [ngStyle] = "{*CSS property* : *{ternary-operator-here}*}"
(4) attribute ngClass is used for dynamically changing an element's class.
Syntax: [ngClass] = " *class name* : *{condition-here}*"
(5) structural ngFor is used for looping through an array with an index variable.
Syntax: ngFor = "let indexVariable of arrayName"
(6) attribute ngSwitch is used to displaying one out of many elements conditionally, like Java.
Syntax for container: [ngSwitch] = "*variable to be checked*"
Syntax for cases: ngSwitchCase = "*value of variable*" or ngSwitchCaseDefault
MAKING ATTRIBUTE DIRECTIVES
(1) You might use the renderer to do everything in a component, for example set styles. https://angular.io/api/core/Renderer2#setstyle.
(2) A better approach would be to use:
Syntax: @HostBinding('*HTML property*') *variable name* : *data type which is expected*
(has to be added to top).
(3) Use @HostListener('*event name*') (has to be added to top) to listen to the host event.
COMPONENTS
(1) Use <ng-content> to mark the place where Angular should insert content into the app component. more info.
MODELS
(1) Models are just typescript files that define what type of value a variable / array has.
(2) They are created by making model name.model.ts and use “ export interface” instead of “export class”.
(3) Then if you want to use the model to define a variable, define it as a type of the model name.
Syntax: *variable name*:*model name*[] = [];
SERVICES
Services are normal typescript files. They do not need anything except a class and a function. They are used to centralize data, and to repeat code in some parts if necessary. To inject a service into a component with Angular, declare a private variable in the constructor and give it a type of the service name.
eg. constructor(private ls: LoggingService){}
Also, you need to add the following in the @Component:
providers:[service name]