Angular by default makes sure that the style that we write in a component will be applied only to the elements of the component. angular enforces this style encapsulation by giving the same attribute to all elements in a component. angular does this for each component by adding a different unique attribute name for each component.
Continue reading “View Encapsulation in Angular”Category: Programming
Communication Between Child/Parent Components in Angular
Angular is based on components and components have to communicate with each other. when we nesting components, we create a parent – child relationship and the most basic communication between parent and child components are property binding and event binding. with the property and event binding we can send data into the component and receive data from the component.
Continue reading “Communication Between Child/Parent Components in Angular”Angular Built-in Directives
Directives are instructions in the DOM just like the components that are kind of instructions in the DOM but with a template.
We typically add directives with an attribute selector, but technically the selector of a directive can be configured just like the selector of a component,
In Angular we have some built in directives and they can be split into 2 categories:
- Structural Directives: NgIf, NgSwitch and NgFor.
- Attribute Directives: NgClass, NgStyle and NgModel.
Communication Between Component and Template in Angular
There are different ways for communication between components and their templates when using Angular:
- string interpolation
- property binding
- event binding
- two way data binding
- two way data binding the long way
Understanding RxJS
What is RxJS?
RxJS is the JavaScript implementation of the Reactive Extensions API.
The reactive extensions API is meant to help you manage the flow of data into your application. check the Reactive Extensions API documentation at the link: http://reactivex.io/.
RxJS stands for:
- Rx – Reactive Extensions API
- JS – JavaScript
Intersection Observer
In my homepage I created an animation whenever a user scroll to a certain section in the homepage. For example when we scroll to the about section, the content appears with a fade in animation.
At start I wrote code using the scroll event: