How to solve the circular dependency

You can use Injector for this. Inject it via constructor as usual, and then when you will need some service that leads to the circular dependency, get that service from it. class HttpService { constructor(private injector: Injector) { } doSomething() { const auth = this.injector.get(AuthService); // use auth as usual } }

angular’s ng-init alternative in Angular 2

You can use a directive @Directive({ selector: ‘ngInit’, exportAs: ‘ngInit’ }) export class NgInit { @Input() values: any = {}; @Input() ngInit; ngOnInit() { if(this.ngInit) { this.ngInit(); } } } you can use it to pass a function to be called like <div [ngInit]=”doSomething” or to make values available <div ngInit [values]=”{a: ‘a’, b: ‘b’}” … Read more

Angular2 conditional routing

As mentioned, Angular Route Guards are a good way to implement conditional routes. Since the Angular Tutorial is a bit wordy on the topic, here is a short summary how to use them with an example. 1. There are several types of guards. If you need something of the logic if (loggedIn) {go to “/dashboard”} … Read more

Angular 4: How to read data from Excel?

You should follow these 3 steps step 1: import ts-xlsx refer: for installation step 2: Using FileReader convert to arraybuffer step 3: Reading the arraybuffer with XLSX and converting as workbook HTML CODE <input type=”file” style=”display: inline-block;” (change)=”incomingfile($event)” placeholder=”Upload file” accept=”.xlsx”> <button type=”button” class=”btn btn-info” (click)=”Upload()” >Upload</button> Typescript //import it import * as XLSX … Read more

Angular – How to fix ‘property does not exist on type’ error?

It usually happens when you develop Angular applications. To solve this just shut down the server & start it again: $ ng serve Explanation This happens because when you start the application, The server is actually serving the bundles(JavaScript/CSS/HTML… output files) stored in the dist folder. Sometimes, when you make changes in your code, the … Read more

How to add form validation pattern in Angular 2?

Now, you don’t need to use FormBuilder and all this complicated valiation angular stuff. I put more details from this (Angular 2.0.8 – 3march2016): Example from repo : <input [ngControl]=”fullName” pattern=”[a-zA-Z ]*”> I test it and it works 🙂 – here is my code: <form (ngSubmit)=”onSubmit(room)” #roomForm=’ngForm’ > … <input id=’room-capacity’ type=”text” class=”form-control” [(ngModel)]=’room.capacity’ … Read more

Angular2 – Expression has changed after it was checked – Binding to div width with resize events

To solve your issue, you simply need to get and store the size of the div in a component property after each resize event, and use that property in the template. This way, the value will stay constant when the 2nd round of change detection runs in dev mode. I also recommend using @HostListener rather … Read more

Property binding vs attribute interpolation

Property binding like [trueValue]=”…” evaluates the expression “…” and assigns the value “true” evaluates to the value true “Y” is unknown. There is no internal Y value in TypeScript and no property in the component class instance, which is the scope of template binding. In this case you would want [trueValue]=”‘Y'” Note the additional quotes … Read more