angular5

Use OpenLayers 4 with Angular 5

Updated to Angular 8.x and OpenLayers 6.x: Install ol and do the following changes: 1.) Add the accordant CSS in the html.index (make sure that the version of the CSS matches the installed version of ol) : <link rel=”stylesheet” href=”https://openlayers.org/en/v6.1.1/css/ol.css” type=”text/css”> Another way is to reference the CSS in the styles object within the angular.json: … Read more

How to update / upgrade from Angular 4 to Angular 5+

This specific problem was fixed with Node version update. I had to update Node version, sudo apt-get install nodejs npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest ng new ProjectName node –version ==> 8.9.0 ng –version ==> 1.5.0 “dependencies”: { “@angular/animations”: “^5.0.0”, “@angular/common”: “^5.0.0”, “@angular/compiler”: “^5.0.0”, “@angular/core”: “^5.0.0”, “@angular/forms”: “^5.0.0”, “@angular/http”: “^5.0.0”, … Read more

Angular 5 Reactive Forms – Radio Button Group

I tried your code, you didn’t assign/bind a value to your formControlName. In HTML file: <form [formGroup]=”form”> <label> <input type=”radio” value=”Male” formControlName=”gender”> <span>male</span> </label> <label> <input type=”radio” value=”Female” formControlName=”gender”> <span>female</span> </label> </form> In the TS file: form: FormGroup; constructor(fb: FormBuilder) { this.name=”Angular2″ this.form = fb.group({ gender: [”, Validators.required] }); } Make sure you use Reactive … Read more

Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]

Here is what worked for me (Angular 7): First import HttpClientModule in your app.module.ts if you didn’t: import { HttpClientModule } from ‘@angular/common/http’; … imports: [ HttpClientModule ], Then change your service @Injectable() export class FooService { to @Injectable({ providedIn: ‘root’ }) export class FooService { Hope it helps. Edit: providedIn Determines which injectors will … Read more

Migrating Angular 4.x to Angular 5 [duplicate]

You need to update all angular provided packages to their latest versions as follows: npm install [email protected] –save-dev npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest –save This should do all the necessary. Plus you could also update your angular cli that ships with angular 5 as standard version as … Read more

Angular 5 – Copy to clipboard

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

Compile dynamic HTML in Angular 4/5- something similar to $compile in Angular JS

For rendering HTML on the fly, you need DomSanitizer. E.g. something like this: <!– template –> <div [innerHTML]=”htmlData”></div> // component import { Component } from ‘@angular/core’; import { DomSanitizer } from ‘@angular/platform-browser’; @Component({ selector: ‘my-app’, templateUrl: ‘./app.component.html’, styleUrls: [ ‘./app.component.css’ ] }) export class AppComponent { htmlData: any; constructor(private sanitizer: DomSanitizer) {} ngOnInit() { this.htmlData= … Read more