Is it possible to bind a [routerLink] to a div? Angular 2+
Yes it can be attached to div tag, your route is probably wrong try add / in front of route. <div [routerLink]=”[‘/explore/brands’]”> go to this location </div>
angular
Angular 6 add items into Observable
If this.contacts is an Observable of list of objects (contacts: Observable<Items[]>) and you want to make some changes to that list, you can simply use tap: import { tap } from ‘rxjs/operators’; this.contacts.pipe(tap(usersList => { usersList.push(newItem); })); But if you want to make another request to the server and merge these lists, you can use … Read more
How to conditionally inject service into component?
You can use the Injector import { Injector } from ‘@angular/core’ … constructor(private injector: Injector){ if(true) { this.oneService = <OneService>this.injector.get(OneService); } else { this.twoService = <TwoService>this.injector.get(TwoService); } } As @MeirionHughes mentioned this is called the service locator pattern: The technique is an example of the service locator pattern. Avoid this technique unless you genuinely need … Read more
Karma unit testing error: Unexpected value imported by the module. Please add a @NgModule annotation
You are injecting MatDialogRef in component: constructor(private dialogRef: MatDialogRef<Mytest1Component>) { } So the testBed expects the same to be injected as provider to the TestBed. Or you can also provide a MockDialogueService to it. beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ Mytest1Component ], providers: [ MatDialogRef ], }) .compileComponents(); }));
What is the difference between createEmbeddedView and createComponent?
See this workshop on DOM manipulation or read Working with DOM in Angular: unexpected consequences and optimization techniques where I explain the difference with examples. These both methods are used to dynamically add content to the component view (DOM). This content can be either a template or a component based. In Angular we usually manipulate … Read more
How can I mock an Observable.throw in an Angular2 test?
Here is my solution for the ones using Rxjs 6 let mockService = { getData: () => { return of({data:’any data’}); } } spyOn(mockService , ‘getData’).and.callFake(() => { return throwError(new Error(‘Fake error’)); });
Angular 7 reactive form how to reset the form and get its initial values instead of resetting them to empty values
You can save the form initial values: this.initialValues = this.formGroup.value; And then pass those values to the reset function: this.formGroup.reset(this.initialValues);
Build and use npm package locally
If you have made these changes on your machine. (I’m assuming you have) Run a build of the ngx-mask package that you changed. run npm pack from that package’s root folder. This creates a .tgz zip file of your package with your custom modifications. copy that file into the root (you could put it wherever … Read more
Is there a way to typehint IDE for “let variable” type in Typescript and Angular?
as the tableDataSource: MatTableDataSource<ToDoInterface>; does not type the model, this: <ng-container matColumnDef=”toDo”> <th mat-header-cell *matHeaderCellDef mat-sort-header>ToDo</th> <td mat-cell *matCellDef=”let model”> <ng-container *ngIf=”assertItemType(model) as toDoModel”> {{toDoModel.toDo}} </ng-container> </td> </ng-container> where: assertItemType(item: ToDoInterface): ToDoInterface { return item; } works. but not sure if it the best way to do it
Passing input values to Dialog Component [duplicate]
open will give you the component instance , means you can inject what ever you want to it like this : openDialog() { let dialogRef = this.dialog.open(DialogOverviewExampleDialog); let instance = dialogRef.componentInstance; instance.text = “This text can be used inside DialogOverviewExampleDialog template “; console.log(‘dialogRef’,dialogRef); } Then obviously inside the DialogOverviewExampleDialog template you can do : this … Read more