Have you taken a look at this module https://www.npmjs.com/package/ng2-pdf-viewer? remember to declare it in the module like so import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import { HttpModule } from ‘@angular/http’; import { PdfViewerComponent } from ‘ng2-pdf-viewer’; import { AppComponent } from ‘./app.component’; @NgModule({ … Read more
I found all your solutions quite complicated and hard to customize, and since i just started i wanted to solve this with components and eventbinding only. So My ContextMenu is a component with Input values x and y and is shown on right click on top of its ParentComponent 🙂 Stackblitz Example So here it … Read more
providedIn: ‘root’ is the easiest and most efficient way to provide services since Angular 6: The service will be available application wide as a singleton with no need to add it to a module’s providers array (like Angular <= 5). If the service is only used within a lazy loaded module it will be lazy … Read more
Angular Material documentation for chips includes a nice example of how to get started with a multiple selection autocomplete: <mat-form-field class=”example-chip-list”> <mat-chip-list #chipList> <mat-chip *ngFor=”let fruit of fruits” [selectable]=”selectable” [removable]=”removable” (removed)=”remove(fruit)”> {{fruit}} <mat-icon matChipRemove *ngIf=”removable”>cancel</mat-icon> </mat-chip> <input placeholder=”New fruit…” #fruitInput [formControl]=”fruitCtrl” [matAutocomplete]=”auto” [matChipInputFor]=”chipList” [matChipInputSeparatorKeyCodes]=”separatorKeysCodes” [matChipInputAddOnBlur]=”addOnBlur” (matChipInputTokenEnd)=”add($event)”> </mat-chip-list> <mat-autocomplete #auto=”matAutocomplete” (optionSelected)=”selected($event)”> <mat-option *ngFor=”let fruit of filteredFruits … Read more
Based on @angular/router v3-beta, these are the required steps. Implement a resolver that returns an Observable or a plain value: @Injectable() export class HeroResolver implements Resolve { constructor( private service: HeroService ) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> { const id = +route.params[‘id’]; return Observable.fromPromise(this.service.getHero(id)); } } Note that in case you return an observable, … Read more
in React you do const Comp = ({ children }) => ( <div class=”wrapper”>{children}</div> ); in Angular2 you do @Component({ selector: ‘comp’, template: ` <div class=”wrapper”><ng-content></ng-content></div> ` }) class Comp {}
You can use History state to pass dynamic data to the component you want to navigate to, without adding them into the URL, like so : this.router.navigateByUrl(‘/user’, { state: { orderId: 1234 } }); or <a [routerLink]=”/user” [state]=”{ orderId: 1234 }”>Go to user’s detail</a> and you can get it this way constructor() { this.router.events .pipe(filter(e … Read more
The most elegant solution is leveraging TypeScript declaration files (*.d.ts) to introduce generic interfaces extending the standard form classes like AbstractControl, FormControl, etc. It doesn’t introduce any new functionality and has no footprint in the compiled JavaScript, but at the same time enforcing strong type checking. It was suggested by Daniele Morosinotto in March this … Read more
You have to update both dependencies at the same time. Had the same issue when only updating one at a time. ng update @angular/material @angular/flex-layout Hope this helps.