DEV Community: Amrish Kushwaha

Create Arrows in CSS using the border property

Amrish Kushwaha — Sat, 24 Oct 2020 08:00:05 +0000

How to apply rendered property of a div or element into another div or element in angular

Amrish Kushwaha — Sat, 22 Aug 2020 03:25:40 +0000

Notes: This article was initially published at https://isamrish.com/how-to-apply-rendered-property-of-a-div-into-another-div/

Problem: how to apply rendered property of a div into another div

Sometimes we want to use the rendered property of an HTML element such as height, width, etc.. to set the property in another HTML element.

Solution: use ngAfterViewChecked lifecycle

This can be easily done in Angular using lifecycle hook ngAfterViewChecked.

Here is the proper solution:

demo.component.html

<div #div1 class="div1">
  <p>Div1</p>
</div>

<div #div2 class="div2">
  <p>Div2</p>
</div>

demo.component.css

.div1 {
  background-color: lightblue;
  height: 100px;
}

@media screen  and (max-width:  767px) {
  .div1 {
    height: 500px;
  }
}

.div2 {
  background-color: lightgreen;
}

demo.component.ts

import { Component, OnInit, ViewChild, Renderer2,AfterViewChecked, HostListener } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit, AfterViewChecked {
  @ViewChild('div1') div1;
  @ViewChild('div2') div2;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
  }

  @HostListener('window:resize', [])
  onResize() {
    this.setDivHeight();
  }

  ngAfterViewChecked() {
   this.setDivHeight();
  }

  setDivHeight() {
    let height = `${this.div1.nativeElement.offsetHeight}px`;
      this.renderer.setStyle(this.div2.nativeElement, 'height', height);
  }

}

Working Example

https://stackblitz.com/edit/set-rendered-height-of-div-to-another-div

I hope that you like the article.

Keep coding and keep learning and keep building stuffs..

Minimal JSON file for adding a single user in a ghost environment.

Amrish Kushwaha — Thu, 23 Jan 2020 17:23:21 +0000

https://gist.github.com/IsAmrish/cd0851e0d983cc1a33759eb7c93c6f99

Make drops shape using css

Amrish Kushwaha — Sat, 11 Jan 2020 08:02:26 +0000

https://codepen.io/isamrish/pen/WNbJZdK

Check Object equality in javascript

Amrish Kushwaha — Fri, 13 Dec 2019 10:19:08 +0000

Check whether two objects are equal or not in javascript

 function isDeepEqual(obj1, obj2, testPrototypes = false) {
  if (obj1 === obj2) {
    return true
  }

  if (typeof obj1 === "function" && typeof obj2 === "function") {
    return obj1.toString() === obj2.toString()
  }

  if (obj1 instanceof Date && obj2 instanceof Date) {
    return obj1.getTime() === obj2.getTime()
  }

  if (
    Object.prototype.toString.call(obj1) !==
      Object.prototype.toString.call(obj2) ||
    typeof obj1 !== "object"
  ) {
    return false
  }

  const prototypesAreEqual = testPrototypes
    ? isDeepEqual(
        Object.getPrototypeOf(obj1),
        Object.getPrototypeOf(obj2),
        true
      )
    : true

  const obj1Props = Object.getOwnPropertyNames(obj1)
  const obj2Props = Object.getOwnPropertyNames(obj2)

  return (
    obj1Props.length === obj2Props.length &&
    prototypesAreEqual &&
    obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))
  )
 }

Color your title underline with the linear gradient

Amrish Kushwaha — Thu, 26 Sep 2019 13:57:54 +0000

How to use linear-gradient to color border-bottom of title

https://codepen.io/isamrish/pen/zYOXqQE

https://codepen.io/isamrish/pen/OJLGXZN

https://codepen.io/isamrish/pen/vYBqYpv

How to display observable of an object in angular

Amrish Kushwaha — Sun, 08 Sep 2019 20:34:57 +0000

It is very easy to display observable in angular using the async pipe.

For example,

If you wanna display an observable of string in angular, it will go like this =>

demo.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
  astring$: Observable<string>;

  constructor() { }

  ngOnInit() {
    this.astring$ = of("Hello Observable!!!")
  }

}

demo.component.html

  <p *ngIf="astring$">
    {{ astring$ | async }}
  </p>

Results

Hello Observable!!!

Display an observable of object

Similar way, we can display observable of the object also.

demo.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

export interface Person {
  name: string;
  place: string;
}

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  myself$: Observable<Person>;

  constructor() { }

  ngOnInit() {

    this.myself$ = of({
      name: 'Amrish',
      place: 'Bangalore'
    })
  }

}

demo.component.ts

<div *ngIf="myself$">
  <p>Name: <span>{{ (myself$ | async).name }}</span></p>
  <p>Place: <span>{{ (myself$ | async).place }}</span></p>
</div>

Result is

Name: Amrish
Place: Bangalore

And also the most efficient way to display it will be

demo.component.ts

<div>
  <div *ngIf="myself$ | async as myself">
    <p>Name: <span>{{ myself.name }}</span></p>
    <p>Place: <span>{{ myself.place }}</span></p>
  </div>
</div>