On August 9, 2019 we the group of developers from Kovai.co gathered for the whole day training session in Angular by Dhananjay Kumar.
About the Speaker
Dhananjay Kumar (alias DJ ) is the 10 times Microsoft MVP, an author and a blogger with 900+ articles and taken over 80+ events and workshops. He is the organizer of the India’s largest angular conference ng-India and the founder of geek97 community.
The day started with Arunkumar Kumaresan oration by giving introduction about the speaker Dhananjay Kumar.
Then the rest of the day was taken over by DJ. He started his session by giving introduction to the angular and taken through the various concepts like,
- Data Binding
- Angular Directives
- Component Communication
- Shadow DOM
- Services and Dependency Injection
- Change Detection
- Custom Attribute Directive
- Reactive Forms
- CRUD operation with angular in-memory web API
Data Binding and Angular Directives
DJ started to explain about the data binding and the various types of binding with demo. And then he jumped into the angular directives and showed the live demo to change the structure and styling of DOM elements.
Types of Data Binding
- Property Binding []
- Event Binding ()
- Two-way Binding [()]
Two-way Binding
It is the combination of the property binding and event binding. In other words as “Banana in the Box” syntax [()].
After a short break with coffee and snacks, we got a deep understanding about the component communication, life cycle hooks and role of change detector in angular.
Component communication
In angular each component will communicate to each other to share the datas. Two unrelated components will share data via the services. But the related component will share data via the @input and @output decorator.
Lets consider the example
AppComponent is the parent component and wants to communicate to the ChildComponent which is inside the parent component. Then the Appcomponent will share the data via the @input and recieve the data via @output decorator.
Change Detector – updating the DOM whenever data gets changed.
Angular Life cycle hooks
We can to know about the angular component life cycle phases from being created to destroyed. As a result we get deep understanding about the ngOnChanges() and ngOnInit().
Then we have created the simple application with the workflow to moniter the change detection and to control/stop the change detection.
Later he jumped into the Shadow DOM and explained about how to share/not share the CSS styling between the component.
Arunprabhu Muthusamy received Angular Essentials Book from DJ by answering the question posted during the session.
In the second half of the day
We gathered after the lunch, DJ taken us to reactive forms with the live demonstration for the custom validator and conditional validator. He picked up some simple scenarios in part of coding and given such simple ideas and solution to solve those problems. So, as the result we can able to solve it easily.
Later we came to know about types of providers in angular and when to use the required one.
Types of providers
- useClass
- useExisting
- useValue
- useFactory
Angular In-memory web API
Provides a memory data store to do CRUD operations with fake REST-API. It is faking the back end in angular app such that we can use the mock data without having it in backend.
Finally, we had a Q&A session to clarify our doubts and few of us have received the Angular Essentials books from DJ. The day ended by taking the memorable picture with our CEO Saravana Kumar along with DJ.
The whole day was very interactive and gained more knowledge in angular core concepts with the real-world live examples…
