DEV Community: Revanth Oleti

Angular Core Elements[ng]

Revanth Oleti — Tue, 23 Nov 2021 10:57:49 +0000

There are several things under the hood of Angular core library. Here, we are going to look three templates which are mostly confused and also used by every angular developer

ng-container
ng-content
ng-template

ng-container

It only holds the directives without creating the HTML template. We can apply conditional expressions to this tag and insert the template in it, so that the template in it will be loaded with respect to the condition provided, this may be helpful when there is a need to apply multiple conditions on single element.

Below is the basic example how we can apply conditional expressions.

---------what you right-------------------
<ng-container *ngIf="isIronMan">
  <h1>Tony Stark</h1>
  <p>.......</p>
</ng-container>

--------what it loads in DOM---------------
<h1>Tony Stark</h1>
<p>.......</p>

ng-template

The template in it doesn't load until unless we attach it to the container. We can apply as many conditions as we want if we attach it to a directive. These are instances of TemplateRef class.

We need to pass the reference of the template to ViewContainerRef class createEmbededView method, which in turns load it in the container. Developers have full control on how and when it should display.

We can also apply structural directives on the template. You can understand it in the below example.

<ng-template [ngIf]="isAdmin" [ngIfElse]="loading">
  <h1>Admin</h1>
</ng-template>
<ng-template #loading>
  <h1>Loading....</h1>
<ng-template>

In the above example we can see how conditions changes the template rendering. ngIf checks whether isAdmin is true or false. If true it loads the first template or else it loads the template referred with loading name.

ng-content

In simple terms we can say it as replacement for Iframes. We create directives and the content inside that particular directive selector tag will be loaded into the directive and We can specify where to project the content inside the template by assigning to an attribute called select.
It doesn't create any DOM element on its name.

We can understand more with the below example.
General way of defining ng-content with directive.

----------------Directive--------------
import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p>From another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From another component</p>

If the attribute matches, then content is loaded into the specified position.

import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
    <ng-content select="[testProjection]"></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p testProjection>From another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From another component</p>

If the attribute doesn't match then it loads into the default position.

import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
    <ng-content select="[testProjection]"></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p testProjection>From Example 1 another component</p>
  <p>From Example 2 another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From Example 2 another component</p>
<p>From Example 1 another component</p>

In the second case even the p tag with testProjection is written first, due to ng-content select attribute with testProjection is loaded after default ng-content it will be loaded after the second p tag.

Hope you got the clarity and know the differences between all the three elements.

Happy coding.....

Difference between Subject and BehaviorSubject

Revanth Oleti — Thu, 28 Oct 2021 11:25:25 +0000

Before stepping into the differences, first let us know what Subject and BehaviorSubject actually are? With RxJS coming into the picture, Angular became much more asynchronous. Let us discuss with asynchronous is.

To display users data when ever the user logged in, We need to get the users data from internet or server or some where else which is not available in the application. To do that we are making some HttpRequest to the server asking for it. Thus we don't know how long it will take to get the data. The response didn't come synchronously or line after line of code, instead it will be available when ever it comes. It is called asynchronous.

To get the asynchronous data, there is a tool called Observable which is provided by RxJS library. It is a collection of objects overtime that we use to contain data retrieved from asynchronous calls. It works on subscription basis, same as Netflix and Amazon. If we subscribe to an observable, then we can get the data that the observable have and also it will be updated when new data is available. If we unsubscribe it, then we can't see or get the data and also can't update the existing data.

const source = new BehaviorSubject<string>('');
source.next('hi')
source.next('hello')
source.subscribe(x=>
  console.log(x)
)

output will be:


hi
hello

For every new value updated in the source, it will be display in the output console until the source was unsubscribed.

Both Subject and BehaviorSubject are Observables. Let us know more about each observable with simple example.

Subject

From the below example you can see, we have a Subject called mySubject and it has three subscribers.

const mySubject = new Subject<number>();
mySubject.subscribe({
  next: (z) => console.log('a');
});
mySubject.subscribe({
  next: (z) => console.log('b');
});
mySubject.next(1)
mySubject.next(2)

mySubject.subscribe({
  next: (z) => console.log('c');
});

mySubject.next(3)

First we are assigning value 1 to mySubject using mySubject.next(1), Where it will call both subscribers and in the console it will print a and b.
Second we are assigning value 2 to mySubject using mySubject.next(2), Where it will call both subscribers and in the console it will print a and b.
Then we created another subscriber to mySubject. Later by assigning 3 to mySubject using mySubject.next(3), It will call all three subscribers and in console it will print a,b and c.
Output in the console will be

a
b
a
b
a
b
c

Now you know how the subject works, let us also know how BehaviorSubject works.

BehaviorSubject

It also has same syntax as Subject. But with the BehaviorSubject you can get the current value on Subscription. Whenever if you subscribe using the observable, it will immediately retrieves the current value. Lets understand with a small example.

var behariorSubject = new BehaviorSubject<number>(0);
behariorSubject.subscribe({
  next: (z) => console.log('observerA: ' + z) 
});

behariorSubject.next(1);  

behariorSubject.next(2);   

behariorSubject.subscribe({
  next: (z) => console.log('observerB: ' + z)  
});

behariorSubject.next(3);

In the above example we have a behaviourSubject with two subscribers and assigning three values. Irrespective of when it is subscribed, all the subscribers get the latest values of the behaviorSubject.
Output in the console will be

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

Subject Vs BehaviorSubject

Now you know how both Subject and BehaviorSubject works. The main problem you get is that when can we use Subject and when can we use BehaviorSubject. By knowing the difference between them you can get idea when to use which observable.

Values they hold

If you subscribe to a Subject, we wont get current value or initial value.
But when you subscirbe to a BehaviorSubject, you will get the current or initial value.

Initial Value

For Subject, we don't need to initial a value.
But whenever we declare BehaviorSubject we need to initialize a default value.

Subscribers

In Subject, the subscribers will only receive the upcoming value.
In BehaviorSubject, the subscribers will receive the previous value and also upcoming value.

Conclusion

These are some of the key differences between Subject and BehaviorSubject. You can learn more about observables if you visit this link.

Happy Coding...