angular5

How to add icon to mat-icon-button

by

Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose: <button mat-button> <mat-icon>mic</mat-icon> Start Recording </button> OR <button mat-raised-button color=”accent”> <mat-icon>mic</mat-icon> Start Recording </button> Here is a link to stackblitz demo.

Read response headers from API response – Angular 5 + TypeScript

by

Have you exposed the X-Token from server side using access-control-expose-headers? because not all headers are allowed to be accessed from the client side, you need to expose them from the server side Also in your frontend, you can use new HTTP module to get a full response using {observe: ‘response’} like http .get<any>(‘url’, {observe: ‘response’}) … Read more

NullInjectorError: No provider for MatDialogRef

by

I had this error when adding dialogs to a service to be shared in many components. Just to clarify, the error wasn’t present in the application before moving dialogs to the service. The solution was to include a custom provider MatDialogRef in the main module import { DialogService } from ‘./services/dialog.service’; import { MatDialogModule, MatDialogRef … Read more

Set focus on element

by

Edit 2022: Read a more modern way with @Cichy’s answer below Modify the show search method like this showSearch(){ this.show = !this.show; setTimeout(()=>{ // this will make the execution after the above boolean has changed this.searchElement.nativeElement.focus(); },0); }

Expected validator to return Promise or Observable

by

It means that you have to add multiple validators in array . Example: With Error profileFormGroup = { budget: [null, Validators.required, Validators.min(1)] }; Above one throws error that validator to return Promise or Observable Fix: profileFormGroup = { budget: [null, [Validators.required, Validators.min(1)]] }; Explanation: In angular Reactive form validation done by using in-built validators which … Read more

Angular 5 – Copy to clipboard

by

Solution 1: Copy any text HTML <button (click)=”copyMessage(‘This goes to Clipboard’)” value=”click to copy” >Copy this</button> .ts file copyMessage(val: string){ const selBox = document.createElement(‘textarea’); selBox.style.position = ‘fixed’; selBox.style.left=”0″; selBox.style.top = ‘0’; selBox.style.opacity = ‘0’; selBox.value = val; document.body.appendChild(selBox); selBox.focus(); selBox.select(); document.execCommand(‘copy’); document.body.removeChild(selBox); } Solution 2: Copy from a TextBox HTML <input type=”text” value=”User input Text … Read more