Part 1:
Composurary element:
- @Component(): The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view
- Template: Tells Angular how to render the component (Similar to HTML but it is not)
- Controller: Data binding with template (export class ...)
Conditional element:
- @input (receive the values passed from parent component, like what React props did)
- @output (share data among different components)
- Lifecycle hooks (trigger some functions at different steps)
- Animations (collaborate with components)
- Styles
Part 2:
Sample:
Calculator:
app.component.html
<p>{{result}}</p>
<button (click)="onMinusClick(result)">Delete</button>
<button (click)="onAddClick(result)">Add</button>
app.component.ts
public result: number = 5;
onMinusClick = (result: number) => {
this.result = result - 1;
};
onAddClick = (result: number) => {
this.result = result + 1;
};
When you define a number, it is public even you don't use "public"
Methods to declare property: public, private, protected
- public: can be used inside or outside the class
- private: can be used inside the class
- protected: can be used inside the class and children classes
We can also give an value in constructor:
constructor() {
this.greet = "hello world"
}
public greet: string;
Bind HTML to template
app.component.ts
public sampleHTML = "<h1>Hello world</h1>";
app.component.html
<p [innerHTML]="sampleHTML"></p>
