Input changes β name changes β check commit β need
β two-way binding!
[(ngModule)]
β from FormsModule
β two-way binding!
Getting started β The basics β Components & Databinding β Directives β Services & Dependency Injection β Routing β Observables β Forms β Pipes β Http β Authentication β Optimizations & NgModules β Deployment β Animations & Testing
- Superset for JS β define type as you want + check when coding
- TS doesn't run in the browser β compiled to JS before that
Strict mode forces you to write more verbose code in some places (especially when it comes to class properties). β Disable it!!!!
Things I understand more from the course!
- All things are in
/index.html
β Single Page Application!!!
- After
ng serve
, there will be a script at the end of the page will be injected by CLI automatically!
- First code is executed β
main.ts
βbootstrapModule(AppModule)
β fromapp.module.ts
β there isbootstrap: []
(this one is only in app root)
- Key feature in angular!
- After creating a new component β Don't forget to add it in module!!!! (if using
ng generate component <module-name>
, we don't need to do that manually)
- Split up your complex app into reusable components.
- Good practice: having folder name = component name
- (Convention) Name of component
ServerComponent
β normal typescript class with decorator@Component()
- Make sure unique selector
<app-server>
- Can use inline in
selector, template, styles
of@Component()
β using backtick ``` for multiple lines.
- For
selector
constructor
in class β called whenever component created β a function of TypeScript!
Databinding = communication
Dynamic binding DOM's properties
Event binding
Two-way binding β enable
ngModel
directive!!!- Model = a type of file, eg.
recipe.model.ts
- Can be used multiple times β write a class β can be extended later!
- Nhα»―ng type chung chung vα» cΓ‘i gΓ¬ ΔΓ³ thΓ¬ nΓͺn lΓ m thΓ nh 1 model
Containing elements can be used across different features in the project!
- Read and understand the error messgaes.
- Sourcemaps β Open debugger tool in browser (Chrome) >
main.bundle.js
> click some checkpoint > jump/open a new file containing the line of code (eg.app.component.ts
) β however, if bundle gets bigger β hard to find
- Go to webpack// > ./ > src > all your files with the same structure on your project!!!
- Using Angular Augury (browser extension) > Add another tab in Browser Inspect tool.
- Don't forget to click on "refresh" button on the top-right bar!
- From a big app β how could we split this app (vid)? β We wanna exchange info between child components with parent components.
By default, all properties of a components can be only used by this component only (not the outside) β That's why we need
@Input()
π If the communication between components (by using
EventEmitter
, input, output,..) are too complicated β check the use of Service! (section "Services with cross-components")Something changes in the child, we wanna inform parent to know about them.
- Encapsulation = sΓΊc tΓch / ngαΊ―n gα»n!
- CSS classed defined in parent can be used only in parent β they are not applied to child components! β behavior enforce by angular (not by browser)
- Every styles in css file can be applied to the component they belong to!
- Turn off "Encapsulation"? β so classes in parent can affect child component as usual css behavior, i.e. classes defined are applied globally! β there is no "strange" attribut like
_ngcontent-eoj-0
anymore.
Sometimes, we don't need 2-way binding (
[(ngModel)]
) β using local reference (eg. #input
)Local references can be use with any type of element (not only input) + anywhere in your template (only the template!!!).
We can access local reference from component.ts by using this decorator!
DON'T manipulate the DOM from the component.ts!!!, like
β Use string interpolation or property binding if you wanna output something to the DOM!
- Project content into component.
- Everything between
<app-server>Text</app-server>
will be lost β angular will not take care about it! β usingng-content
USING MULTIPLE
ng-content
?- A new component created β Angular go into some phases (processes) β we can hook into these phases
ngOnChanges
β called after bound input property changes (remember@Input()
) β listen to the changes
ngOnInit
β called once component is initialized (afterconstructor
)
ngDoCheck
β called during every change detection run β useful when you wanna do something on evert change detection cycle
- "Content" in above life cycle hooks β comes from
<ng-content></ng-content>
- Rarely need to use all of them!
ngAfterViewinit
β before that, there is no some view, we cannot do anything with it. Using this hook to make sure that some component is presented in DOM (View)!
- We have different "ContentInit" and "ViewInit" here because "Content" and "View" are different. Check more on section "ViewChild" and "@ContentChild" to see the different!
Order on starting
Whenever there are changes!!!! (event when clicked / Promise back from loaded data,....) >
ngDoCheck
@ViewChild()
is used to access to "local reference" in the same component.If you wanna access "local reference" in a content β use
@ContentChild()
(It's not part of the view, it's a part of the content)- Directives = instructions in the DOM
- You could/should create a separated folder containing all your custom directives.
We cannot have more than 2 structurual directives on the same element!
Behind the scene of
*
? β let angular know it's a structural directive β it will transform them into something else (different from property binding, event binding, 2-way binding, string interpolation) β without *, it cannot separate!Unlike structural directive, attribute directives don't add or remove elements. They only change the element they were placed on!
Unlike structural directives, we can use ngStyle and ngClass in the same element (with another structural directive)
π Using Renderer2
In this section, we learn a way to access/modify DOM element inside a directive (or component, class,...)
Don't wanna use Renderer2?
For example, we can let the users choose the color they want instead of
'blue'
like above!How angular knows
defaultColor
is an input of directive appHighlight
or property of <p>
? β it checks your custom directives first, then check the native properties after that.Use
*appUnless
π Check this.
This part is vert later than above parts. However, it talks about components, I put it here. For example, we wanna show error, modal, ....
π Codes for this section.
(Video) β what are "dynamic components"? β it means that they are not always there but they will be there if there are something happens with your codes.