DEV Community: danielpdev

Rebuild Gmail text input

danielpdev — Mon, 06 Apr 2020 19:59:05 +0000

Now let's see how you can build one.

We'll start like always with

HTML

<div class="form-control">
  <input required type="text" name="input" />
  <label>Email address or phone number </label>
  <div class="border-around"></div>
</div>

For our text input we first need to create a container:

<div class="form-control">
...
</div>

In this container we are going to have as first child a text input, a label and then a div which will be used to add that nice bluish border around our input.

<input required type="text" name="input" />
<label>Email address or phone number </label>
<div class="border-around"></div>

We just finished the HTML part and now we need to add some CSS.

CSS

Styling our container:

Here we're just going to add a width, height and also a position: relative; because we will further use position: absolute; to align the border and label as desired.

.form-control {
  position: relative;
  width: 280px;
  height: 50px;
}

Styling text input:

The text input needs to have the same size as the container so we'll use
a width and height of 100%. We need to set border to 0 because we're going to use the div with class border-around as the border for our input.

.form-control input {
  width: 100%;
  border: 0;
  outline: none;
  height: 100%;
  padding: 0 15px;
  transition: 0.4s;
}

Styling the label:

Now we have to use position: absolute; with top set to 0 and flex to center align the label inside our input.

.form-control label {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  padding-left: 15px;
  width: 100%;
  height: 100%;
  transition: 0.2s;
  font-size: 1rem;
  color: gray;
  pointer-events: none;
}

Styling the border

We will have a border of 1px solid rgba(0, 0, 0, 0.2) and border-radius of 3px.

.form-control div.border-around {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  padding-right: 25px;
  top: 0;
  pointer-events: none;
  border-radius: 3px;
  transition: 0.2s;
}

Lets now take advantage of the pseudo classes and change some css properties when we interact with our input:

Use pseudo classes to style elements on `:focus`, `:valid` and `:not(:focus)`.

`input:valid`

Because we've set required on text input, input:valid will match only when our text input is valid.

`input:focus`

When we focus on our input we need to move up the label and also add a color to the border, this two selectors will to the trick:

.form-control input:focus ~ div.border-around
.form-control input:focus + label

`input:not(:focus)`

After we've added some text to our input and clicked somewhere else
we need to change the text color,input:not(:focus) will do the trick.

.form-control input:valid + label {
  top: -0.45rem;
  left: 10px;
  font-size: 0.9rem;
  z-index: 100;
  width: auto;
  height: 0.9rem;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.3);
}

input:not(:focus) {
  color: rgba(0, 0, 0, 0.5);
}

.form-control input:focus + label {
  top: -0.45rem;
  left: 10px;
  font-size: 0.9rem;
  z-index: 100;
  width: auto;
  height: 0.9rem;
  padding: 0 10px;
  color: #3484f0;
}

.form-control input:focus ~ div.border-around {
  border: 2px solid #3484f0;
}

That's all you need!
Hope you enjoyed and see you next time!

Here you can find the live version

Show details transition using HTML and CSS

danielpdev — Wed, 01 Apr 2020 14:12:54 +0000

If you've seen the above transition and you liked it then it's time to move on and see how it's built.

It's pretty easy to build something like that using only HTML and CSS, so let's get ready:

We'll start as always with HTML part:

First we'll start off by adding a div container for our image and the mask that we will trigger when the hover selector gets activated:

HTML

     <div class="card">
        <img
          src="...some url"
        />
        <div class="mask">
          <div class="content">
            <h2>Programmer</h2>
            <p>
              You are the best!
            </p>
          </div>
        </div>
    </div>

CSS: The container for our image

Next we're going to write down some basic css:

.card {
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 5px;
}

We need overflow: hidden; because our div with details will be in the same container but just moved down so we can't really see it at first.

Then we need position: absolute; to be able to use top, right, bottom, left properties to move the details div down.

CSS: Adding width and height for our image

We move on to styling the image that will be first loaded. The image needs to be spread throughout the container:

.card img {
  width: 100%;
  height: 100%;
}

CSS: Styling the details mask

Now its time for our details mask to get some styles:

.card .mask {
  opacity: 0.8;
  top: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #181a1c;
  transition: 0.2s;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

The important things here are :

...
  opacity: 0.8;
  top: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
...

We used opacity: 0.85; to make the details div transparent and we moved it from top by 100%;, this means that it is no longer in view, and because we added overflow: hidden; on the container looks like it never existed.

CSS: Triggering our transition

Now to trigger our transition we just need to set the top position to 0 and enjoy:

.card:hover .mask {
  top: 0;
}

I hope you enjoyed, here is the live version

Build a toggle button with only HTML and CSS

danielpdev — Mon, 30 Mar 2020 17:22:00 +0000

Live version & edit

In this tutorial I'll try to show you how you can build a toggle button using only HTML and CSS.

Ready?

1.HTML

 <div class="toggle-container">
      <input type="checkbox" />
      <div class="slider round"></div>
 </div>

First we need a container where our toggle button is going placed in:

 <div class="toggle-container">
....
</div>

Then we need a input with type checkbox which will be used as a state for our toggle button

      <input type="checkbox" />

And the actual slider with the thumb and label for our toggle button.

      <div class="slider round"></div>

Done? CSS part coming right now.

2. CSS

First, the container:

.toggle-container {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 40px;
  pointer-events: none;
}

What we did here?

  position: relative;

Since we are are going to try to position our slider and thumb like pixel perfect, we need to set the position property to relative on the container and later on use the absolute position for those elements that are positioned relative to the toggle-container class.

  display: inline-block;

By default a div it's displayed as a block, we need to fix that by adding display: inline-block and then setting the desired width and height properties.

  pointer-events: none;

We are going to set pointer-events to none for all elements that are placed higher than our input because they will steal our pointer events intended to be handled by our input.

Now we need to style our input:

.toggle-container input {
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}

We need our input to be spread across our container so when we click anywhere inside the container our input will catch those events.
The following will do exactly that:

 ...
  width: 100%;
  height: 100%;
  pointer-events: all;
...

opacity: 0; will hide our input, but it will not remove it from the DOM.

The next thing that we need styled is our slider:

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #808080;
  transition: 0.4s;
  pointer-events: none;
}

Our slider need to be spread throughout the container:

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

The next css properties will help us set the background color and also add a transition of 0.4 seconds for all of slider properties that gets changed during its lifetime.

  cursor: pointer;
  background-color: #808080;
  transition: 0.4s;
  pointer-events: none;

Adding the thumb using ::before pseudo-element

.slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 8px;
  bottom: 8px;
  background-color: #fff;
  transition: 0.2s;
  pointer-events: none;
}

::before and ::after pseudo-elements can be used in various ways to add content before and after an element. They will not work with replaced elements such as inputs and image HTML elements.
In order to finish our thumb we first need to set a width: 24px; and
a height: 24px; and then position: absolute; using bottom: 8px; and
left: 8px;.
transition: 0.2s; needs to be added because we would like a smooth animation when the position of the thumb gets changed.

For our 'ON'/'OFF' labels we are going to use the ::after pseudo-element

.slider::after {
  position: absolute;
  content: "off";
  height: 24px;
  width: 24px;
  right: 10px;
  bottom: 6px;
  transition: 0.2s;
  pointer-events: none;
  color: #fff;
}

::after it's pretty similar to what we've done so far for our thumb using ::before pseudo-element.

Final part: When our input is clicked we need to change some CSS

Slider background color when we click anywhere in the container.

input:checked + .slider {
  background-color: #2196f3;
}

Using :checked pseudo class helps us determin when the input gets clicked and based on that we're going to use the adjacent sibling selector + and change our slider background color to #2196f3.

Move the thumb by some pixels:

input:checked + .slider:before {
  transform: translateX(40px);
}

Using transform property set to translateX(40px) we're able to move our thumbnail and because we've set the transition on '0.2s' we're going to see a smooth translation by 40px.

Now we have to add the 'on' label when our checkbox gets clicked

input:checked + .slider:after {
  content: "on";
  left: 8px;
}

And we're pretty done, just one more step:

Add rounded corners for both the slider and the thumb:


.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Enjoy!
Hope you liked this tutorial.

JavaScript start-up performance using JSON.parse

danielpdev — Sun, 22 Mar 2020 12:24:28 +0000

Original article on v8.dev

This optimization only applies if you have an application where the startup uses a large configuration object > 10Kb.

When you load the application and the object you are using at startup it is > 10kb, then formatting the configuration object as a string and using JSON.parse during running can give you a nice performance improvement (1.7 × as much as possible fast).

Provide simple value for components in Angular

danielpdev — Mon, 16 Mar 2020 09:54:13 +0000

Sometimes you need to inject a simple value into multiple components

To inject a simple value you have to pass an object to the providers array of your NgModule decorator.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: "language",
      useValue: "en"
    }
  ],
  bootstrap: [AppComponent]
})

And in your components import Inject decorator:
@Inject() is a decorator relevant for DI and helps you manually inject a value into your components.

import { Component, Inject } from "@angular/core";

....
export class AppComponent {
  constructor(@Inject("language") private language) {
    console.log(this.language);
  }
}

You can also use @Inject() decorator to provide services from your module.

Ex:

import { Component, Inject } from "@angular/core";
import { AppService } from "./app.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(
    @Inject("language") private language,
    @Inject(AppService) private appSer,
    private appSer2: AppService
  ) {
    console.log(this.language, this.appSer, this.appSer2);
  }
}

Using:

...
    @Inject(AppService) private appSer,
    private appSer2: AppService
...

Above code illustrates 2 ways of injecting a service into your component.

Hope you find it useful and see you on the next post!
Stay safe!

How to internationalize dates in Angular

danielpdev — Sat, 14 Mar 2020 12:45:04 +0000

Depends on your use case:

from typescript code using formatDate helper function
from HTML templates using DatePipe

Let's explore this 2 use cases:

Internationalize dates from code:

Angular helps us by providing formatDate helper function from @angular/common package.

How to use formatDate ?

formatDate receives 4 parameters:

Parameter	Type	Meaning
value	`string, number, Date`	date as string, number or a javascript Date object
format	`string`	should look like DateTime pipe formats
locale	`string`	use `@Inject(LOCALE_ID)` to get current user locale
timezone	`string`	timezone abbreviation, defaults to local system timezone

Example:

import { Component } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { formatDate } from "@angular/common";

import { of } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  currentDate = new Date();
  dateFormat = "dd MMM yyyy";
  currentDate$ = of(formatDate(this.currentDate, this.dateFormat, this.locale));
  constructor(@Inject(LOCALE_ID) public locale: string) {}
}

The above Angular code should show current date as 14 Mar 2020.

Internationalize dates from HTML:

DatePipe and formatDate parameters are pretty similar with each other:

Parameter	Type	Meaning
value	`string, number, Date`	date as string, number or a javascript Date object
format	`string`	should look like DateTime pipe formats
timezone	`string`	timezone abbreviation, defaults to local system timezone
locale	`string`	use `@Inject(LOCALE_ID)` to get current user locale

In HTML we could use date pipe:

  {{ (currentDate) | date:dateFormat:'GMT':locale }}

The above Angular code should show current date as 14 Mar 2020.

Difference in parameters positioning:

formatDate timezone it's at the end and date pipe timezone it's the third one.
So, there is a switch between the last two parameters in terms of positioning.

When to use `formatDate` function or `date` pipe ?

formatDate mostly for times when you need to compose big strings from code
date pipe for times when you need to format a single date on HTML

Article first posted here

Follow me on twitter

Easy refactor ternary conditions to if else

danielpdev — Tue, 10 Mar 2020 13:51:27 +0000

Have you ever had a pain on understanding ternary conditions put in the code by others colleagues that have left the project?

Well, if you think understanding a simple ternary it's easy for you, look at the following example:


const [a1, a2, a3] = [true, 3, true];

const a4 = 0;
const [a5, a6, a7] = [false, 2, false];

const result = a1 ? a4 : a2 ? a4 : a5 ? a6 : a7 ? a4 :
  a5 ? a6 : a7 ? a4 : a5 ? a6 : a7 ? a4 : a5 ? a6 : a7;

console.log(result);

What will be the value of result?
Take your time....
.............
...........
.........
.......
.....
...
..
.
R: 0

Now imagine that we have a lot more expressions and not just numbers and booleans. Yeah, not the best day of changing something in the old codebase.

But there is a package that auto refactors to an IIFE(Immediately Invoked Function Expression) easy and more readable.

Its a babel plugin wrote a while ago

Now, after using ternary to if else we get:

var a = function () {
  if (a1) {
    return a4;
  }

  return function () {
    if (a2) {
      return a4;
    }

    return function () {
      if (a5) {
        return a6;
      }

      return function () {
        if (a7) {
          return a4;
        }

        return function () {
          if (a5) {
            return a6;
          }

          return function () {
            if (a7) {
              return a4;
            }

            return function () {
              if (a5) {
                return a6;
              }

              return function () {
                if (a7) {
                  return a4;
                }

                return function () {
                  if (a5) {
                    return a6;
                  }

                  return a7;
                }();
              }();
            }();
          }();
        }();
      }();
    }();
  }();
}();

Enjoy and keep on coding!

Complete useRef() hook with live code examples

danielpdev — Thu, 05 Mar 2020 19:52:00 +0000

What's up with `useRef` hook?

useRef returns an object with a current property. This current property gets the initial value of the argument passed to useRef hook. The reference to {current: <any value>} object will persist from render to render.

Is useRef hook used only for accessing Document Object Model(DOM) elements?

No, useRef hook can also be used as an instance variable.

How can useRef be used as an instance variable?

The object returned by the useRef hook can be used as a container whose current property can store a value over the lifetime of the functional component.

The most common use case of `useRef` hook is:

Keep a live ref to a DOMElement.

  function TextInput() {
    const inputEl = useRef(null);
    return (
      <>
        <input ref={inputEl} type="text" />
      </>
    );
  }

The important thing here is:

      const inputEl = useRef(null);

and

        <input ref={inputEl} type="text" />

After the first render, inputEl will have an object with current property pointing to our input element.

Difference between using `useRef` and assigning an ordinary `{current: ...}` object

Live example

As of React documentation, useRef gives us the same object on every render while plain old JS object will just be recreated every render.

1. With useRef


  function setWindowRef<T>(ref: React.RefObject<T>) {
    (window as any).ref = ref;
  }

  function getWindowRef<T>() {
    return (window as any).ref;
  }

  export default function UseRefReact() {
    const [renders, setValue] = React.useState(1);
    const ref = React.useRef(null);

    React.useEffect(() => {
      setWindowRef<HTMLDivElement>(ref);
    });

    return (
      <div className="UseRefReact">
        <div>UseRef with React.useRef(null)</div>
        <button onClick={e => setValue(renders + 1)}> Rerender </button>
        <div ref={ref}>Renders {renders}</div>
        <div>
          {" "}
          {getWindowRef() === ref ? "same ref object" : "ref not set yet"}{" "}
        </div>
      </div>
    );
  }

Making use of const ref = React.useRef(null); and <div ref={ref}>Renders {renders}</div> will give
us the reference to that div element.

How can we check if the object `ref` was changed when our functional component was rendered ?

Another object persisting between renders will help us check if the ref object has changed.

window object enters the scene:

  function setWindowRef<T>(ref: React.RefObject<T>) {
    (window as any).ref = ref;
  }

  function getWindowRef<T>() {
    return (window as any).ref;
  }

Ok, now that our helper functions are defined, we can move to the next step:

When do we call our functions?

call setWindowRef after our component has been rendered

  setTimeout(() => {
    setWindowRef<HTMLDivElement>(ref);
  });

getWindowRef when the view is rendered

    <div>
        {getWindowRef() === ref ? "same ref object" : "ref not set yet"}
     </div>

First render we will get "ref not set yet".

Why?

Long answer:

The reason we get "ref not set yet" on first render is because of how JS works under the hood.

Short answer:

setTimeout(() => { setWindowRef<HTMLDivElement>(ref); }); setWindowRef will be queued and executed after we return from our function.

On any other renderers we will get "same ref object", meaning that indeed React makes sure that we get the same instance with every render.(Thanks React).

2. Without useRef

function setWindowObjectRef<T>(ref: React.RefObject<T>) {
  (window as any).objectRef = ref;
}

function getWindowRef<T>() {
  return (window as any).objectRef;
}
export default function UseRefObject() {
  const [renders, setValue] = React.useState(1);
  const ref = { current: null };

  setTimeout(() => {
    setWindowObjectRef<HTMLDivElement>(ref);
  });
  return (
    <div className="UseRefObject">
      <div>UseRef with {`{ current: null }`}</div>
      <button onClick={e => setValue(renders + 1)}> Rerender </button>
      <div ref={ref}>Renders {renders}</div>
      <div>
        {" "}
        {getWindowRef() === ref ? "same ref object" : "ref object changed"}{" "}
      </div>
    </div>
  );
}

Examples are pretty much the same.

Small differences:

window.objectRef instead of window.ref because we don't what to mess up our example
const ref = { current: null }; instead of using React.useRef(null)

Now, on every render we get "ref object changed" and it seems that we verified how useRef() works and why we should use it when we want to persist a value between renders.

Conclusion:

useRef will always return the same object with the same current property value pointing to the same object throughout the lifetime of your functional component.
even though useRef creates a plain JS object with a current property, manually creating an object like
{ current: null }to select a DOM element by passing it to a ref attribute, will not persist the object between renders.

Article first posted on danielpdev.io

Follow me on twitter

Normalize your complex JS objects

danielpdev — Mon, 02 Mar 2020 18:29:34 +0000

Data normalization

The process of normalization its havily used in every software design because normalizing data has a big impact on reducing data redunancy.

When to normalize your data?

Suppose we received the following data from an api:

const apiData = [
    {
        id: 1,
        name: "Daniel Popa",
        siteUrl: "danielpdev.io"
    },
    {
        id: 2,
        name: "Other Name",
        siteUrl: "danielpdev.io"
    }
];

Now, you get a task to find the item with id of 1.

How will you solve it?

1. Dummy solution with complexity O(n):

Iterate over the whole collection using a find and output the result.

const findId = (apiData, id) => apiData.find(el => el.id === id);

You finished quite fast and gone for a coffee, but over the next few months the data grows and now you don't have only two elements,
but 10000. Your time of searching for elements will increase considerabily.

2. Normalized solution with complexity O(1):

Transform data from [objects] => { id: object}:

const apiData = [
    {
        id: 1,
        name: "Daniel Popa",
        siteUrl: "danielpdev.io"
    },
    {
        id: 2,
        name: "Other Name",
        siteUrl: "danielpdev.io"
    }
];

function assignBy(key) {
    return (data, item) => {
        data[item[key]] = item;
        return data;
    }
}
const optimizedData = apiData.reduce(assignBy("id"), {});

optimizedData variable looks like the following:

{
  "1": {
    "id": 1,
    "name": "Daniel Popa",
    "siteUrl": "danielpdev.io"
  },
  "2": {
    "id": 2,
    "name": "Other Name",
    "siteUrl": "danielpdev.io"
  }
}

Now, searching for an element becomes really easy. Just optimizedData[id] and your data is ready.

Conclusion:

Normalize your data only when dealing with complex objects and searching for objects takes long.

Article first posted on danielpdev.io

Follow me on twitter

Two ways of using AsyncPipe programmatically

danielpdev — Mon, 02 Mar 2020 18:12:13 +0000

What is AsyncPipe?

AsyncPipe is an angular pipe that helps you resolve an asynchronous value(like an observable or a promise) to a primitive one.

Common use cases of using AsyncPipe:

Being a pipe it's mostly used on HTML.

Do I need to subscribe/unsubscribe when I use the AsyncPipe on HTML?

No, the implementation of AsyncPipe will take care of subscribing and unsubscribing.

How can I use AsyncPipe programmatically in my custom pipes?

Here you can find two ways of using AsyncPipe in your custom pipes:

1. Providing `AsyncPipe` and `ChangeDetectorRef` to Dependancy Injection (DI) in your module

You might think that it will just work if you let Dependancy Injection (DI) do the work for you:

@Pipe({ name: "my_async_pipe" })
export class MyAsyncPipe implements PipeTransform {
  constructor(private asyncPipe: AsyncPipe) {}
  transform(value: any): any {
      return this.asyncPipe.transform(value);
  }
}

Above code will not work and will throw an error like:

ERROR NullInjectorError: StaticInjectorError(AppModule)[ErrorAsyncPipe -> AsyncPipe]: 
  StaticInjectorError(Platform: core)[ErrorAsyncPipe -> AsyncPipe]: 
    NullInjectorError: No provider for AsyncPipe!

Hmmm seams like AsyncPipe has not be added to providers array. Let's fix this error:

Go to app.module.ts
Add providers: [AsyncPipe]
reload

ERROR NullInjectorError: StaticInjectorError(AppModule)[AsyncPipe -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[AsyncPipe -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!

Another injector not provided, let's repeat the steps above, but this time add ChangeDetectorRef as Provider:

Go to app.module.ts
This time add providers: [AsyncPipe, ChangeDetectorRef as Provider]
reload

Success, AsyncPipe has been successfully provided for your custom Pipe.

2. Creating a new `AsyncPipe` instance

@Pipe({ name: "cdr_async_pipe" })
export class CdrAsyncPipe implements PipeTransform {
  private asyncPipe: AsyncPipe;
  constructor(private cdr: ChangeDetectorRef) {
    this.asyncPipe = new AsyncPipe(this.cdr);
  }
  transform(value: any): any {
    return this.asyncPipe.transform(value);
  }

  ngOnDestroy() {
    this.asyncPipe.ngOnDestroy();
  }
}

Using:

 constructor(private cdr: ChangeDetectorRef) {
    this.asyncPipe = new AsyncPipe(this.cdr);
  }

The code above creates an instance of AsyncPipe by passing the ChangeDetectorRef as argument.

If you do create your own AsyncPipe manually then please don't forget to call ngOnDestroy() lifecycle method.

Which is the best way to use `AsyncPipe` programmatically in your custom pipes?

In my opinion the second one is the best because DI will not create two instances of ChangeDetectionRef thus no errors like this._ref.markForChek() is not a function will be thrown as ChangeDetectionRef will be created with one of the classes that extends it.

In the next articles we will look at why when we declare ChangeDetectionRef as a provider we get the error this._ref.markForChek() is not a function.

Article first posted on danielpdev.io

Live example on codesandbox

Follow me on twitter

How to use ViewChild in Angular 9

danielpdev — Wed, 26 Feb 2020 21:06:30 +0000

How to use @ViewChild() in Angular 9

Get right to the live example

What is @ViewChild() and when should we use it?

ViewChild is a decorator and it's mostly used within angular when you need to select a particular element from the view.

1. Select a particular directive

@Directive({selector: 'child-directive'})
class ChildDirective {
  @Input() id! :number;
  ngAfterViewInit() {
    console.log("ngAfterViewInit child")
  }
}

@Component({
  selector: 'select-directive',
  template: `
    <child-directive id="1"></child-directive>
  `
})
class SelectDirectiveComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildDirective) child!: ChildDirective;

  ngAfterViewInit() {
    console.log("ngAfterViewInit parent with child = ", this.child);
  }
}

As you might seen above it's pretty simple to select an html element from the view.

By using @ViewChild(ChildDirective) child: ChildDirective; we tell angular that we need to inject into our reference variable child the element from our view template with type ChildDirective.

By default angular will search for our ChildDirective after all the elements from our view have been created and the bindings have been initiated. Will see later, how to get the reference to our view before all the binding has been performed.

2. Select a particular element from view

@Component({
  selector: 'select-element',
  template: `
    <div #myDiv>
    </div>
  `
})
class SelectElementComponent implements AfterViewInit {
  @ViewChild('myDiv') child: HTMLElement;

  ngAfterViewInit() {
    console.log("ngAfterViewInit", this.child);
  }
}

Selecting an html element from view, it's pretty similar with selecting a directive, the main changes are with the aguments that we pass to our @ViewChild decorator.

Instead of using a type, we are going to specify the element that needs to be selected by using a string.

In our example above we are using #myDiv to identify our element in the view and @ViewChild('myDiv') to tell angular that we need to select that spcific element from our view.

3. Difference between ViewChild static false and static true properties

If you had a chance to look over ViewChild decorator you might have seen that @ViewChild decorator accepts 2 arguments.

Now we are going to explore what ca we do if we are to use the second argument.

The second argument that ViewChild receives is an object which can have two properties
static and read.

Let's talk first about the static option.
Before Angular 9, this static option had a value of true by default.

What `{ static: true }` does?

Having static set to true will result in telling angular that we need to get the reference to that target element as soon as the component is created, however this means that we are going to get the reference
before our element had a chance to bind the inputs and init it's view.

Example

@Directive({selector: 'child-directive'})
class ChildDirective {
  @Input() id! :number;
  ngAfterViewInit() {
    console.log("child");
  }
}

@Component({
  selector: 'select-directive',
  template: `
    <child-directive id="1"></child-directive>
  `
})
class SelectDirectiveComponent implements AfterViewInit {
  @ViewChild(ChildDirective, { static: true}) child: ChildDirective;

  ngOnInit() {
    console.log("ngOnInit", this.child);
  }

  ngAfterViewInit() {
    console.log("ngAfterViewInit", this.child);
  }
}

Will print:

ngOnInit ChildDirective {}

ngAfterViewInit child

ngAfterViewInit ChildDirective {id: "1"}

As you have seen, only after the child has it's view created we will see the data for our ChildDirective available in ngAfterViewInit from parent element.

When should you use `{ static: true }` ?

One usecase could be, when you need to access a child element's instance fields that don't rely for their values on inputs from other elements.

Example:

@Directive({selector: 'child-directive'})
class ChildDirective {
  @Input() id! :number;
  public childName = 'childName';
  ngAfterViewInit() {
    console.log("child ngAfterViewInit");
  }
}

@Component({
  selector: 'select-directive',
  template: `
    <child-directive id="1"></child-directive>
  `
})
class SelectDirectiveComponent implements AfterViewInit {
  @ViewChild(ChildDirective, { static: true}) child: ChildDirective;

  ngOnInit() {
    console.log("ngOnInit", this.child);
  }

  ngAfterViewInit() {
    console.log("ngAfterViewInit", this.child);
  }
}

So, { static: true } only makes sense when you have a child that's using an instance field with a predefined value.

What { static: false } does?

It means that angular is going to look for our target element only after the view has been created and in most of the cases this is the way you'll use it.

Example:

@Directive({selector: 'child-directive'})
class ChildDirective {
  @Input() id! :number;
  public childName = 'childName';
  ngAfterViewInit() {
    console.log("ngAfterViewInit child");
  }
}

@Component({
  selector: 'select-directive',
  template: `
    <child-directive id="1"></child-directive>
  `
})
class SelectDirectiveComponent implements AfterViewInit {
  @ViewChild(ChildDirective, { static: false}) child: ChildDirective;

  ngOnInit() {
    console.log("ngOnInit", this.child);
  }
  ngAfterViewInit() {
    console.log("ngAfterViewInit", this.child);
  }
}

Will output something like this:

ngOnInit undefined

ngAfterViewInit child

ngAfterViewInit ChildDirective {childName: "childName", id: "1"}

So, this is the most used approach and it will make angular look for our target element only after the view has been created.

4. Using read to inject a different configuration object

export const TestInjectable = new InjectionToken<Inject>('someToken');

interface Inject {
  val: string;
}
@Directive({selector: 'child-directive',
providers: [{ 
    provide: TestInjectable, useValue: {val: 'someValue'}
  }]
})
class ChildDirective {
  @Input() id! :number;
  public childName = 'childName';
  ngAfterViewInit() {
    console.log("ngAfterViewInit child");
  }
}

@Component({
  selector: 'select-directive-read',
  template: `
    <child-directive id="1"></child-directive>
  `
})
class SelectDirectiveReadComponent implements AfterViewInit {
  @ViewChild(ChildDirective, { read: TestInjectable}) child: Inject;
  @ViewChild(ChildDirective, { read: ElementRef}) childTypeElementRef: ElementRef;
  @ViewChild(ChildDirective, { read: ChildDirective}) childTypeChildrenDirective: ChildDirective;

  ngAfterViewInit() {
    console.log("ngAfterViewInit", this.child);
    console.log("ngAfterViewInit", this.childTypeElementRef);
    console.log("ngAfterViewInit", this.childTypeChildrenDirective);
  }
}

When you run this code, you'll see that:

this.childTypeElementRef will have an instance of ElementRef
this.child will have an instance of TestInjectable
this.childTypeChildrenDirective will have an instance of ChildDirective

Why does all the the above code works?

Thanks to the read configuration parameter, we can specify for our ViewChild decorator that we need to inject a specific instance from the element that angular has queried for.

Using InjectionToken we provided a value of type TestInjectable for ChildDirective and this means we can use
@ViewChild(ChildDirective, { read: TestInjectable}) child: Inject;
to get that specific instance from our ChildDirective.

For others instances like ElementRef and ChildDirective angular will perform the same checks.

When should we use the `read` option?:

When we need to get an injectable instnace from a child element it's useful to use a ViewChild.

Live example also available here

Stay tuned to get more tutorials on Web development

Follow me on twitter

Article first posted on danielpdev.io

Synchronous and Asynchronous observables

danielpdev — Mon, 24 Feb 2020 19:20:41 +0000

Live example here

Are observables synchronous or asynchronous?

It depends on how they are built.

If you look over RxJS dev docs you'll find this:

Observables are lazy Push collections of multiple values.

I've seen that it's a lot of confusion about this on the internet as a lot of people assume that they are asynchronous because observables are presented as a new way of handling asynchronous code. Let me further explain why I say that it depends by using two examples with a custom rxjs operator:

RxJS operator:
In RxJS an operator is just a function that accepts as
input and observable and further returns a new Observable.

1.Synchronous observable:

const simpleBlockingOperator = (noOfLoops: number) => <T>(source: Observable<T>): Observable<T> =>{
  return new Observable(observable => {
    source.subscribe({
      next: no =>{
        let loops = 0;
        while(loops !== noOfLoops) {
          loops++;
        }
        console.log("Done loooping" + loops, " ", noOfLoops)
        return observable.next(no)
      },
      error: error => observable.error(error),
      complete: () => observable.complete()
    })
  })
};

In the above example we've created an rxjs operator which will loop as many times until we pass noOfLoops. Because our
code is synchronous will result in a blocking operation and trying to click in other parts of the page will not be possible as the main thread is blocked with our process of data.

2.Asynchronous observable:

const simpleNonBlockingOperator = (noOfLoops: number) => <T>(source: Observable<T>): Observable<T> =>{
  return new Observable(observable => {
    source.subscribe({
      next: no =>{
        setTimeout(() => {
          let loops = 0;
          while(loops !== noOfLoops) {
            loops++;
          }
          console.log("Done loooping" + loops, " ", noOfLoops)
          return observable.next(no)
        }, 0);
      },
      error: error => observable.error(error),
      complete: () => observable.complete()
    })
  })
};

In our async operator we've used setTimeout, this setTimeout will assure that the main thread will not get blocked because setTimeout
is a browser API and our code will be moved to the event loop.

Conclusion

As you have already seen the observables are not by default async and it strongly depends on how they are written.

More tutorials on JS
Follow me on twitter

DEV Community: danielpdev

Rebuild Gmail text input

HTML

CSS

Styling our container:

Styling text input:

Styling the label:

Styling the border

Use pseudo classes to style elements on :focus, :valid and :not(:focus).

input:valid

input:focus

input:not(:focus)

Show details transition using HTML and CSS

HTML

CSS: The container for our image

CSS: Adding width and height for our image

CSS: Styling the details mask

CSS: Triggering our transition

Build a toggle button with only HTML and CSS

1.HTML

2. CSS

What we did here?

Adding the thumb using ::before pseudo-element

Final part: When our input is clicked we need to change some CSS

Add rounded corners for both the slider and the thumb:

JavaScript start-up performance using JSON.parse

Provide simple value for components in Angular

How to internationalize dates in Angular

Depends on your use case:

Internationalize dates from code:

Internationalize dates from HTML:

Difference in parameters positioning:

When to use formatDate function or date pipe ?

Easy refactor ternary conditions to if else

Complete useRef() hook with live code examples

What's up with useRef hook?

Is useRef hook used only for accessing Document Object Model(DOM) elements?

How can useRef be used as an instance variable?

The most common use case of useRef hook is:

Difference between using useRef and assigning an ordinary {current: ...} object

1. With useRef

How can we check if the object ref was changed when our functional component was rendered ?

When do we call our functions?

Why?

Long answer:

Short answer:

2. Without useRef

Small differences:

Conclusion:

Normalize your complex JS objects

Data normalization

When to normalize your data?

How will you solve it?

1. Dummy solution with complexity O(n):

2. Normalized solution with complexity O(1):

Conclusion:

Two ways of using AsyncPipe programmatically

What is AsyncPipe?

Common use cases of using AsyncPipe:

Do I need to subscribe/unsubscribe when I use the AsyncPipe on HTML?

How can I use AsyncPipe programmatically in my custom pipes?

1. Providing AsyncPipe and ChangeDetectorRef to Dependancy Injection (DI) in your module

2. Creating a new AsyncPipe instance

Which is the best way to use AsyncPipe programmatically in your custom pipes?

How to use ViewChild in Angular 9

How to use @ViewChild() in Angular 9

What is @ViewChild() and when should we use it?

Table of contents:

1. Select a particular directive

2. Select a particular HTML element

3. Difference between ViewChild { static: false } and { static: true }

4. Using read to inject a different configuration object

1. Select a particular directive

2. Select a particular element from view

3. Difference between ViewChild static false and static true properties

What { static: true } does?

Example

When should you use { static: true } ?

Example:

What { static: false } does?

Use pseudo classes to style elements on `:focus`, `:valid` and `:not(:focus)`.

`input:valid`

`input:focus`

`input:not(:focus)`

When to use `formatDate` function or `date` pipe ?

What's up with `useRef` hook?

The most common use case of `useRef` hook is:

Difference between using `useRef` and assigning an ordinary `{current: ...}` object

How can we check if the object `ref` was changed when our functional component was rendered ?

1. Providing `AsyncPipe` and `ChangeDetectorRef` to Dependancy Injection (DI) in your module

2. Creating a new `AsyncPipe` instance

Which is the best way to use `AsyncPipe` programmatically in your custom pipes?

3. Difference between ViewChild `{ static: false }` and `{ static: true }`

4. Using `read` to inject a different configuration object

What `{ static: true }` does?

When should you use `{ static: true }` ?

When should we use the `read` option?: