Posts

Showing posts from February, 2021

On scroll scroll hover animation Angular

In View or HTML // Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, reprehenderit? //in TS import { trigger, state, style, animate, transition } from '@angular/animations'; // decalre 2 styles 1 for show and one for hide const style1 = style({ opacity: 1, transform: "translateX(0)" }) const style2 = style({ opacity: 0, transform: "translateX(-100%)" }) //in animation animations: [ trigger('foobar', [ state('show', style1), state('hide', style2), transition('show => hide', animate('700ms ease-out')), transition('hide => show', animate('700ms ease-in')) ]) ] }) // make default state = hide; //check if scroll is on element; @HostListener('window:scroll', ['$event']) checkScroll() { const componentPosition = this.el.nativeElement.offsetTop const scrollPosition ...

JSON array filter

// create new array myarray: any = []; //consider ourPartnersData is your Json array this.myArr = this.ourPartnersData.filter(function (el) { return el.vc_partner_type == 'digital' }); console.log("new ",this.myArr)

Convering object into Array

//this is your object let myObj = {CountryID: 87944818, ISO2: "do", ISO3: "u", Name: "aliqua sit magna tempor"} // create an empty array let myArr = []; // push your object into arry myArr.push(myObj); //check using type of method console.log(myArr);

[ngStyle] property binding (image) [ngStyle] image binding not working

//use like below - you should add url() within that use your value as property binding //note don't write your value as string.