Services are not only great for sharing data, they can also provide notifications. we can use the service to broadcast a notification to components/services about state changes without the need to wait for the component to ask for the new state.
Continue reading “Angular Service: Notification”Category: Angular
Angular Service: State Management
communication is all about sharing and we can use services to share entity data across components. entity data can be for example posts, products, songs, movies and so on. this kind of service is a data access service.
We use the service as a data access service to encapsulate the common operations with data like get, add, update and delete data items. in the service we create methods that usually will make HTTP requests to get, add, update and delete data. each component that needs the data will use the service to get the data and will make an action on the data through the use of the service.
Continue reading “Angular Service: State Management”Angular Service: Property Bag
There are several ways to manage state with services and the simplest one is named “property bag”. it means that the service is like a bag of properties with no real logic or state management. this type of service exposes simple properties that the components use to communicate state among themselves.
Continue reading “Angular Service: Property Bag”Angular Services
Angular services are a very important building block in angular, they can help us to centralize general tasks, share data, prevent code duplication and to communicate between components.
Continue reading “Angular Services”Angular Custom Structual Directive
Structural directives looks like normal HTML attribute but with a leading star. they affect the whole area in the DOM, it means they change the structure of the DOM around the element they added on. for example, *ngIf can remove an element from the DOM.
Continue reading “Angular Custom Structual Directive”Angular Content Projection and @ContentChild
Content projection with ng-content is a feature that can help us when we building a configurable reusable component.
ng-content is a directive that we can use as a selector and this serves as a hook you can put in a component to mark the place for angular where it should add any content it findes between the opening and closing tag of the component.
Continue reading “Angular Content Projection and @ContentChild”Angular Lifecycle Hooks
When Angular finds a selector, it instantiates a new component and adds it into the DOM. in this creation process, Angular goes through a couple of different phases and we can hook into these phases by implementing some methods that Angular will call if they are present.
Continue reading “Angular Lifecycle Hooks”Local References in Angular
Local references are a nice feature for communication between components and the templates. They can be placed on any HTML element by typing a hashtag with a name of your choice on the HTML element.
The local reference will hold a reference to the whole HTML element with all its properties and you can use them directly only on the template.
Continue reading “Local References in Angular”View Encapsulation in Angular
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”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”