angular6

Select All mat option and deselect All

by

Use code as below create function on click each mat-option and select()/deselect() all option: See stackblitz:https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app/app.component.html TS: togglePerOne(all){ if (this.allSelected.selected) { this.allSelected.deselect(); return false; } if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length) this.allSelected.select(); } toggleAllSelection() { if (this.allSelected.selected) { this.searchUserForm.controls.userType .patchValue([…this.userTypeFilters.map(item => item.key), 0]); } else { this.searchUserForm.controls.userType.patchValue([]); } } HTML: <form [formGroup]=”searchUserForm” fxFlex fxLayout=”column” autocomplete=”off” style=”margin: 30px”> <mat-select placeholder=”User Type” … Read more

Is there a way to add a type assertion / annotation to a template input variable?

by

Let’s see what angular has similar to that and how it work! <p *ngFor=”let number of [{v: 101},{v: 102}, {v: 103}]”>{{number.v}}</p> We can rewrite it without * magic <ng-template ngFor let-number [ngForOf]=”[{v: 101},{v: 102}, {v: 103}]”> <p>{{number.v}}</p> </ng-template> Without watchers (ngDoCheck) it can be the same as (but ngTemplateOutlet have no typecheck): <ng-template let-number #templateRef> … Read more

Angular component default style css display block

by

My pull-request has been merged. With the upcoming release of Angular CLI v9.1.0 a new option is going to be available: –displayBlock=true|false Docs: https://next.angular.io/cli/generate#component For the impatient: It’s available right now in v9.1.0-next.0 When using the CLI: ng generate component dashboard –displayBlock=true Settting a default value in angular.json: … “projectType”: “application”, “schematics”: { “@schematics/angular:component”: { … Read more

Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste

by

Update This warning is coming from ng-packagr (and there’s now a section of the ng-packagr docs about this). Turns out ng-packagr is just telling you that it wants you to add all dependencies to an “allowedNonPeerDependencies”: [] property in ng-package.json (this option used to be called “whitelistedNonPeerDependencies”). For example: { “allowedNonPeerDependencies”: [ “tslib”, … ] … Read more

Using scss as default style sheet in Angular 6+ (styleExt)

by

The position on which this is set changed in the angular.json. There are 2 ways to set this option now. Via the Angular CLI: ng config schematics.@schematics/angular:component.styleext scss Directly in the angular.json: “schematics”: { “@schematics/angular:component”: { “styleext”: “scss” } } Angular 9 Update: Note that from Angular 9 onwards styleext is renamed to style. So … Read more

Angular 6 ng lint combineLatest is deprecated

by

combineLatest is deprecated: resultSelector no longer supported, pipe to map instead The above warning is recommending to remove the resultSelector the last function you provided in combineLatest observable and provide it as part of map operator as follows const a$ = combineLatest( this.aStore.select(b.getAuth), this.cStore.select(b.getUrl) ); const result$ = a$.pipe( map(results => ({auth: results[0], url: results[1]})) … Read more

Angular : how to call finally() with RXJS 6

by

use throwError instead of Observable.throw, see https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#observable-classes finally was renamed to finalize and you’ll use it inside pipe() among other operators. the same with publish() and refCount(). Both are operators you’ll use inside pipe().

How to navigate to other page in angular 6?

by

@sasi.. try like this, <a routerLink=”/registration”><button class=”btn btn-success” > Submit </button></a> Update : In order to use the routing in your application, you must register the components which allows the angular router to render the view. We need register our components in App Module or any Feature Module of it (your current working module) in … Read more

Angular 6 run a function in every X seconds

by

Use interval from rxjs Here’s how: import { interval, Subscription } from ‘rxjs’; subscription: Subscription; … //emit value in sequence every 10 second const source = interval(10000); const text=”Your Text Here”; this.subscription = source.subscribe(val => this.opensnack(text)); … ngOnDestroy() { this.subscription.unsubscribe(); } Alternatively, you can use setInterval which is available as method on the Window Object. … Read more

Angular 6: Multiple configurations (twas environments)

by

There is a configurations entry in the build and in the serve section of the angular.json file. The serve part needs to know about your custom configuration as well. Assuming your configuration name is debug, add it to the serve section as follows “projects”: { “myApp”: { […] “architect”: { “build”: { […] “configurations”: { … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)