AngularJS

What is your question?

AngularJS is a JavaScript framework. Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.

Subjects

Latest Asked Question

Q : create rediect 301 in angular js in routes

45 Likes

Q : How to give router transition animation in Angular ?

A : I follow these steps to create animation in angular. Enabling the animations module by importing import { BrowserAnimationsModule } from '@angular/platform-browser/animations' in your app.module.ts file next you need to create animation.ts file and write below code . import { animate, query, style, transition, trigger, group, } from '@angular/animations'; export function routerAnimation() { return trigger('routerAnimation', [ // One time initial load. Move page from left -100% to 0% transition('-1 => *', [ query(':enter', [ style({ position: 'fixed', width: '100%', transform: 'translateX(-100%)', }), animate( '500ms ease', style({ opacity: 1, transform: 'translateX(0%)', }), ), ]), ]), // Previous, slide left to right to show left page transition(':decrement', [ // set new page X location to be -100% query( ':enter', style({ position: 'fixed', width: '100%', transform: 'translateX(-100%)', }), ), group([ // slide existing page from 0% to 100% to the right query( ':leave', animate( '500ms ease', style({ position: 'fixed', width: '100%', transform: 'translateX(100%)', }), ), ), // slide new page from -100% to 0% to the right query( ':enter', animate( '500ms ease', style({ opacity: 1, transform: 'translateX(0%)', }), ), ), ]), ]), // Next, slide right to left to show right page transition(':increment', [ // set new page X location to be 100% query( ':enter', style({ position: 'fixed', width: '100%', transform: 'translateX(100%)', }), ), group([ // slide existing page from 0% to -100% to the left query( ':leave', animate( '500ms ease', style({ position: 'fixed', width: '100%', transform: 'translateX(-100%)', }), ), ), // slide new page from 100% to 0% to the left query( ':enter', animate( '500ms ease', style({ opacity: 1, transform: 'translateX(0%)', }), ), ), ]), ]), ]); } next in your app-routing.module.ts file,write below code where routes define , { path: 'abc', component: AbcComponent, data: { num: 1 } } { path: 'test', component: TestComponent, data: { num: 2 } } next in your app.component.ts file you need to write below code, import { routerAnimation } from './common/animations'; import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], animations: [routerAnimation()], }) export class AppComponent { constructor() {} public getRouteAnimation(outlet: RouterOutlet) { const res = outlet.activatedRouteData.num === undefined ? -1 : outlet.activatedRouteData.num; return res; } } next in app.component.html file you need to write below code, <div class="navbar"> <a [routerLink]="['abc']">Abc</a><xmp> <a [routerLink]="['test']">Test</a><xmp> </div> <div class="content" [@routerAnimation]="getRouteAnimation(router)"> <router-outlet #router="outlet"></router-outlet> </div> follow all of the above steps to make animation in your angular projects.

45 Likes

Q : angular keyvalue pipe sort properties / iterate in order

A : Hi, You can try this code, it is working Fine in my project. In Template file you can write below code after constructor. originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => { return 0; } And in html component file you can write below code. write this code in ngfor pipe keyvalue. <select class="form-control" id="test" [(ngModel)]="testing"> <option> --Select category--</option> <option *ngFor="let categoryList of categoryLists | keyvalue: originalOrder" value="{{categoryList.key}}">{{categoryList.key}}</option> </select>

45 Likes

Q : How to Select All checkboxes In Angular js

45 Likes

Q : EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

A : hi use this { path: "user", //use full path loadChildren: () => import("app/modules/user/user.module").then(m => m.UserModule) } allow full path // Full path including `src` at the start: loadChildren: "src/app/customers/customers.module#CustomersModule"

45 Likes

Q : Property 'forRoot' does not exist on type 'typeof NgxJsonLdModule'

A : hi you can use these line of code NgxJsonLdModule.forRoot(); //no need to call forRoot function; @NgModule({ declarations: [AppComponent], imports: [ AppRoutingModule, NgtUniversalModule, NgxJsonLdModule ], providers: [] }) export class AppModule {}

45 Likes

Q : error TS2339: Property 'split' does not exist on type 'string | string[]'. Property 'split' does not exist on type 'string[]'

A : this.imageFileArray.push((reader.result as string).split(",")[1]); this.imageFileArray.push((<string>reader.result).split(",")[1]);

45 Likes

AngularJS Related Topic's

No topic yet