angular6

I have finished to update my App to Angular 6 (it was in 5.2 version). I got an error syntax in : import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { filter } from 'rxjs/operators'; ... constructor(private router: Router) {} this.router.events.filter (event => event instanceof NavigationEnd).subscribe((res) => { // DO something }); error TS2339: Property 'filter' does not exist on type 'Observable'. what's the right syntax in Angular 6 ? thanks Lansana Camara This is how to filter router events with Angular 6+ and latest RxJS: import { Component, OnInit } from '

How to I specify the environment to use in Angular 6? The .angular-cli.json file seems to have changed to angular.json from previous versions and with it the structure of the json within. How/where in this file do I specify the environments to use? Open angular.json file. we can see the configurations by default it will be shown for production add code snippet for your respective environments. add environment.dev.ts file in environment for dev, add environment.qa.ts for qa. Name as you prefered. use ng serve --configuration=environment_name environment_name - (dev,qa,prod) same process can be

I am trying to build a custom component using multiple ng content in angular 6 but this is not working and I have no idea why. This is my component code: <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> I am trying to use this component in another place and render two differents HTML code inside body and header select of ng-content, something like this: <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng

I am building the application in Angular, now I have run the command ng build --prod which gave me a dist folder. Now how to check or serve that folder on Localhost ? You can do that using http-server . First install the package globally npm install http-server -g . Then inside your project directory(in the terminal) just run http-server dist/ . And if your are using angular 6.x.x, You have to run http-server dist/your-project-name Now you can visit http://localhost:8080 to view your application In my case I did next: Install http-server globally npm install http-server -g Then inside the

When generating services in the Angular CLI, it is adding extra metadata with a 'provided in' property with a default of 'root' for the Injectable decorator. @Injectable({ providedIn: 'root', }) What exactly does providedIn do? I am assuming this is making the service available like a 'global' type singleton service for the whole application, however, wouldn't be cleaner to declare such services in the provider array of the AppModule? UPDATE: For anyone else, the following paragraph provided another good explanation of it also, in particular if you want to provide your service to only a

In the latest release of Angular 6, a service is registered in a module using the providedIn property in the service metadata: @Injectable({ providedIn: 'root', }) export class HeroService {} However the documentation still also refers to registering the service in the module providers array in the module metadata just like we did in Angular 5: @NgModule({ providers: [HeroService], }) export class AppModule {} So, Which method should be used to make the injector aware of the service that it should inject? Will the module providers array method be deprecated? Pardeep Jain Basically you can use

I try form template driven validation for select and radio buttons and checkboxes but not working these custom fields. How we can validate these fields.I do not know how to do it.Please anyone help me to resolve this issue. <!--Country--> <div class="form-group"> <label for="country">Country</label> <app-selectbox name="country" [(inputModel)]="model.country" [(ngModel)]="model.country" #country="ngModel" required> <option [ngValue]="null">---Select---</option> <option *ngFor="let item of stateData" [value]="item"> {{item}} </option> </app-selectbox> </div> <!-- Hosting radio checks --> <div

<mat-sidenav-container class="sidenav-container"> <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'push' : 'push'" [opened]="!(isHandset$ | async)"> <mat-toolbar color="primary">Menu</mat-toolbar> <mat-nav-list> <a mat-list-item href="#">Link 1</a> <a mat-list-item href="#">Link 2</a> <a mat-list-item href="#">Link 3</a> </mat-nav-list> </mat-sidenav> I do not understand what is written in the code (isHandset$ | async) please explain 'Handset' is one of the breakpoint names of angular