DEV Community: Budi Irawan

What other ways to enforce immutability in Angular beside using Immutable.js?

Budi Irawan — Wed, 27 Oct 2021 00:20:40 +0000

If we use OnPush change detection strategy, immutability is helpful to ensure change detection works expectedly.

Problem in Immutable.js

One of the way to enforce immutability is using Immutable.js. However, using Immutable.js is not really straightforward. It adds another layer instead of using JS object directly e.g

const apps = List([{ name: 'slack' }, { name: 'skype' }]);
apps.get(0); // { name: 'slack' }

const app = Map({ name: 'slack' });
map.get("name"); // 'slack'

// Using Record if we want to access property directly
const AppRecord = Record({
    name: ''
});

class App extends AppRecord {
    constructor(props) {
        super(props);
    }
}

const newApp = new App({ name: 'slack' });
newApp.name; // 'slack'

We have to use get when using List and Map. Using Record could solve the issue, but if we have a very large object, using Record will be hard to maintain because we need to create each record per object and it's nested object.

Other issue is about JS compatibility because it needs to use fromJS and toJS methods to convert from and to JS object.

I'd say that I'm not a fan of that lib and it makes things more complicated.

Other possible approach I'm thinking of:

TS `readonly` + ESLint immutable

Since Angular using Typescript, let's use Readonly<T>, ReadonlyArray to enforce immutability.

Also add this no-mutation ESLint rule as extra protection https://github.com/jonaskello/eslint-plugin-functional/blob/master/docs/rules/immutable-data.md

is there any better approach?

Thank you

Can SPA be used for building a public directory site with SEO support?

Budi Irawan — Sat, 10 Oct 2020 08:19:02 +0000

Hi everyone,

I'm planning to create a directory website similar to Yelp or Yellow Page that support SEO for popular search engines and also social media preview.

My current SPA (Single Page Application) framework is Angular. I've been building some internal Angular apps (don't care about SEO), but this time I got this initiative to build one for the public. I've explored some options to add SEO support for Angular.

Angular Universal => I have done spike for this one but I feel that it will be hard to maintain code for universal rendering.
Rendertron => seems great but worry about infrastructure cost and also wondering if it is scalable. Rendertron link

Looking at Yelp and Yellow Page, seems they are not built using SPA, maybe Python or PHP. It questions me whether this kind of public website is not the best case for SPA.

Do you have any suggestions about the approach that I should take? Do we have an example of a successful SPA for a public website?

Thank you in advance

Covid-19 Stats Chrome Extension - Angular

Budi Irawan — Thu, 07 May 2020 12:38:34 +0000

Hi everyone, I want to share my Chrome extension to display Covid-19 statistics.

Download link

Github repository

Screenshots

Tech stack:

Angular 9
Jest
Cypress

Things learned

This is actually my first Chrome extension 😬 so it's been a great experience
CSS variables for switching light and dark mode
Github Actions to run Jest and Cypress (I used to use Travis CI)
I used Figma to design the UI (I used to use Sketch)

Hope you guys like it

DOM Property vs HTML Attribute in Property Binding

Budi Irawan — Sun, 22 Sep 2019 02:42:05 +0000

To gain more understanding of how Angular property binding works, we need to know the differences between DOM Property and HTML attributes. Property binding is a way to display a value comes from component to template.

If we have this ordinary HTML,

<input type="text" value="name"></input>

and if we want to bind a property to that in Angular, we wrap value with square brackets [ and ] such as:

<input type="text" [value]="name"></input>

We have value and [value]. Regardless of the brackets, they look exactly the same but they are different things.

What you must know is

In the first code, value is an HTML attribute. See HTML Input.
In the second code, value in [value] is a DOM property. See HTMLInputElement.

So, what Angular does in property binding is always target DOM property, not HTML attribute.

Does HTML attribute always have 1:1 mapping with DOM property?

The answer is no.

Some of them have 1:1 mapping e.g value, name, type, id, src
Some of them have 1:1 mapping with different name e.g. tabindex vs tabIndex, rowspan vs rowSpan, colspan vs colSpan
Some exist only in HTML attribute e.g. role, aria
Some exist only in DOM property e.g. textContent

Custom Property

Angular allows us to have custom property either from directive or component.

<div [ngStyle]="{'font-size': fontSize}"></div>

ngStyle is a custom property comes from Angular directive. Others such as ngClass, ngIf and etc.

Example for a custom component:

<student-list [students]="students"></student-list>

students is a custom property from component named StudentList that we have below

student-list.component.ts


@Component({
  selector: 'student-list'
  ...
})
export class StudentList {
  @Input() students;
}

Angular read from @Input of that component so it'll recognize students property.

The default behavior of Angular in property binding will always look for

Custom property from directive or component
DOM property

If Angular couldn't find the property from those two, it will trigger an error, for example we are trying to specify unknown property initial like below:

<input type="text" value="name" [initial]="initialValue" />

Summary

Property binding in Angular always targets to DOM property instead of HTML attribute. In order to support custom property, Angular will look for custom property from directive or component then DOM property.

3 Different Ways to Use Input Decorator

Budi Irawan — Sat, 07 Sep 2019 20:54:53 +0000

Input (@Input()) is one of the most used decorators in Angular apps. It is used to pass data from the parent or host component to the child component. This decorator has a relation with DOM property in the template where the child component is used.

There are three different ways to use this decorator.

1) Plain

This is the basic way to use Input decorator.

child-one.component.ts



@Input() message: string;

child-one.component.html



<p>{{ message }}</p>

parent.component.html



<child-one message="hi there"></child-one>

Output:

We have a variable named message and we give it @Input() decorator for that variable. The DOM property in the template parent-component.html will use the same name as the variable name.

2) Alias

By using an alias, the DOM property in the template can use different name. To give alias, we can give an argument in Input decorator such as @Input('my-alias-naming'). Below is the example:

child-two.component.ts



@Input('msg') message: string;

child-two.component.html



<p>{{ message }}</p> <!-- still uses `message` -->

parent.component.html



<child-two msg="hi there"></child-two> <!-- use alias 'msg' -->

Output:

Here, we give an alias msg in Input decorator to message variable. In the child component template (child-component.html), we still refer to it as message.

HOWEVER, in the parent component template (parent-component.html), we refer to it using its alias msg.

3) Setter Getter

Using the same previous examples, consider that we want to display the message in uppercase.

This is probably the common way

child.component.ts



@Input() message: string;

ngOnInit() {
  this.message = this.message && this.message.toUpperCase();
}

or, another approach is using uppercase pipe

child.component.ts



@Input() message: string;

child.component.html



<p>{{ message | uppercase }}</p> <!-- using uppercase pipe -->

Well, there's another way by using set and get from the Typescript class. They are known as auto-properties which are used to access the class variable and we can execute some logic there.

child-three.component.ts



private _message: string;

@Input() // specify Input decorator here
set message(inputMessage: string) {
  this._message = inputMessage && inputMessage.toUpperCase(); // uppercase message here
}

get message(): string {
  return this._message;
}

child-three.component.html



<p>{{ message }}</p>

parent.component.html



<child-three message="hi there"></child-three>

Output

As seen in the code, we define logic to uppercase the message in the set method.

Can we still give an alias using this way? Yes, we can specify alias too such as

child-three.component.ts



@Input('msg') // give alias
set message(inputMessage: string) {
  this._message = inputMessage && inputMessage.toUpperCase(); // uppercase message here
}

parent.component.html



<child-three msg="hi there"></child-three> <!-- use alias 'msg' -->

Demo

Demo on Stackblitz

Summary

Three different ways to use Input decorator. They are plain, alias and set get method. Plain way is the most basic way, the DOM property will have the same name as the variable name. The alias way gives us the flexibility to have different DOM property name. Lastly, set and get allow us to execute some logic.

Using ng-content for Content Projection

Budi Irawan — Sat, 31 Aug 2019 01:45:07 +0000

Content projection is a useful technique in Angular to modify component content. Let's learn it from a very simple scenario.

You have a button component button.component.ts using <button> and currently, the text used there is submit

button.component.ts


import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button class="primary-button">
      submit
    </button>
  `,
  styles: [
    '.primary-button { background: #94FEB1; padding: 10px; }'
  ]
})
export class AppButtonComponent  {  
}

Then we use that component twice in the HTML template of app component.

app.component.html

<app-button></app-button>
<app-button></app-button>

It will definitely show two buttons with submit text.

How can we customize the text for that component? Let's say I want to display login text for the first button and register for the second one.

One approach is just to use @Input so, the text can be passed as property as such

app.component.html

<app-button [text]="login"></app-button>
<app-button [text]="register"></app-button>

That's not too bad but we can try another approach using ng-content. To use it, we put <ng-content></ng-content> as replacement of submit text.

button.component.ts

<button class="primary-button">
  <ng-content></ng-content>
</button>

Then in the HTML template

app.component.html

<app-button>login</app-button>
<app-button>register</app-button>

Woah, this looks familiar like <button> HTML tag. See that the inner content of <app-button> are projected into the <ng-content></ng-content> that we define in the HTML template of button component.

That is a single content projection. Interestingly, we can also use ng-content for multi-content projection.

Multi-content Projection

Let's say we have a new component named Banner. It looks like this

import { Component } from '@angular/core';

@Component({
  selector: 'app-banner',
  template: `
    <div class="banner">
      <div class="banner-title">
        title
      </div>
      <div class="banner-description">
        description        
      </div>
    </div>
  `,
  styles: [
    '.banner { background: #C1FDFE; padding: 10px; border: 1px solid #333 }',
    '.banner-title { font-weight: bold; font-size: 20px; color: #5D83FE }',    
  ]
})
export class AppBannerComponent  {  
}

app.component.html

<app-banner></app-banner>

Here is when it is displayed

Notice that we have a blue color for title and black color for description. What we're trying to do is to use ng-content to modify title and description in the banner component.

You must think that it should be easy to solve by adding it like below

banner.component.ts

<div class="banner">
  <div class="banner-title">
    <ng-content></ng-content>
  </div>

  <div class="banner-description">
    <ng-content></ng-content>
  </div>
</div>

Then

app.component.html

<app-banner> 
  <h1>Black Friday Discount</h1>
  <p>50% discount for specific products</p>
</app-banner>

And this what happened

Can you spot something wrong? Yes, our banner title is not shown in blue color. Apparently, if we have multiple ng-content specified in the template, Angular will only use the latest defined one. In our case, it will only replace ng-content in banner-description.We should project title and description to correct place.

To solve this, ng-content has a property named select. If you specify select with a CSS matching selector, it will get only the elements matching the selector from the passed in content.

<div class="banner">
  <div class="banner-title">
    <ng-content select="h1"></ng-content>
  </div>
  <div class="banner-description">
    <ng-content select="p"></ng-content>       
  </div>
</div>

for banner-title, we target h1 tag, and for banner-description, we're looking for p tag from the passed content.

And the result will be

This is what we want. Awesome!

Remember that select property accepts CSS selector, so you can also use class or any valid CSS selector, for example:

<ng-content select=".my-title"></ng-content>

Code example on Stackblitz

Summary

ng-content is a way to pass content into a component. It has select property that allows us to have multiple content projection.

Hope this article is useful!

DEV Community: Budi Irawan

What other ways to enforce immutability in Angular beside using Immutable.js?

Problem in Immutable.js

TS readonly + ESLint immutable

Can SPA be used for building a public directory site with SEO support?

Covid-19 Stats Chrome Extension - Angular

Screenshots

Tech stack:

Things learned

DOM Property vs HTML Attribute in Property Binding

Custom Property

Summary

3 Different Ways to Use Input Decorator

1) Plain

2) Alias

3) Setter Getter

Demo

Summary

Using ng-content for Content Projection

Multi-content Projection

Summary

TS `readonly` + ESLint immutable