angular

[Solved] Angular 2 ngFor for nested json [duplicate]

by

Try this code to separate your devices into 2 groups : <div *ngFor=”let drop of config”> <ng-container *ngIf=”drop.id === ‘imu_device’; else gpsBlock”> <h1>IMU Device</h1> <ul> <li *ngFOr=”let sub1 of drop.fields”> {{sub1}}</li> </ul> </ng-container> <ng-container #gpsBlock> <h1>Gps Device</h1> <ul> <li *ngFOr=”let sub1 of drop.fields”> {{sub1}}</li> </ul> </ng-container> </div> You loop on config, and conditionnally display device … Read more

[Solved] Match two object keys and display another object key value in angular 4

by

Use array find: var languages = [ {“name”: “english”, “iso_639_2_code”: “eng”}, {“name”: “esperanto”,”iso_639_2_code”: “epo”}, {“name”: “estonian”,”iso_639_2_code”: “est”} ]; var user = [{name: “john”,language: “eng”,country: “US”}]; var language = languages.find(l => l.iso_639_2_code === user[0].language); var languageName = language && language.name; // <– also prevent error when there is no corresponding language found console.log(languageName); EDIT: With multiple … Read more

[Solved] Angular 5 export html to image

by

If you want to add url links to images dynamically, here is the code. You can change the input text event to that HTML link which you want to store. HTML for module HTML: <h1>{{title}}</h1> <div> <input type=”text” (input)=”onInputEvent($event)”> </div> <div> <a [href]=’url’> <img src=”https://stackoverflow.com/questions/51904633/smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”> </a> </div> module typeScript: import { Component … Read more

[Solved] Can’t find a datepicker that plays nicely with angular-meteor

by

Semi-Solution Set AOT=1 in meteor environment variables. Discussion I was able to get ng-bootstrap working by sym-linking the library (to ensure that it is transpiled) and then building Meteor with AOT enabled. I narrowed down the original failure to an area in the Angular JIT compiler code. I really don’t know a ton about how … Read more

[Solved] ERROR TypeError: Cannot set property ‘abc’ of undefined Angular2

by

this in the reader.onload is not the object’s context. So it haven’t any variable with name jsondata. You can use arrow function to preserve your context to the object. reader.onload = (eve:any) => { this.jsondata[‘json_def’] = JSON.parse(eve.target.result); console.log(this.json_def); } 1 solved ERROR TypeError: Cannot set property ‘abc’ of undefined Angular2

[Solved] Hide form in table application angular 2

by

I’m going to just go out on a completely random limb here and say you’re probably looking for [hidden]=”some Boolean statement” Your other option is: *ngIf=”some Boolean statement” Otherwise, your question is way too vague. I’d suggest maybe reading this solved Hide form in table application angular 2

[Solved] Error in typescript function- Function lacks ending return statement and return type does not include ‘undefined’ [closed]

by

It seems that the Typescript’s compiler does not understand that if the length of the array is different from zero, it will surely enter the loan and return a value. So, the simple soultion is this: private createBreadcrumbs(route: ActivatedRoute, url: string = ‘#’, breadcrumbs: MenuItem[] = []): MenuItem[] { const children: ActivatedRoute[] = route.children; for … Read more

[Solved] Angular: ng-model and ng-show not working

by

ng-show and ng-model are part of angularjs (1.x). In angular 4, you can do the following: <div> <input type=”checkbox” unchecked name=”advanced” [(ngModel)]=”checked”> <p>Advanced search</p> </div> <p [hidden]=”!checked”> advanced-search works! </p> p.s. the user cleared in his comment on the question that he is using angular4. 4 solved Angular: ng-model and ng-show not working

[Solved] Angular Pipe to Hide Duplicates from Array

by

on your component please add a function to remove duplicates result:any=[]; removeDupliacate(){ this.ash.forEach(function(item) { if(this.result.indexOf(item) < 0) { this.result.push(item); } }); } and then in your template <tbody *ngFor=”let dt of result;let i = index” > <tr> <td class=”tg-yw4l nobord” style=”border-left: inset;border-right: none;”>{{dt.values}}</td> </tr> <tr> <td>{{dt.value2}}</td> </tr> </tbody> or you can implement pipe with the … Read more

[Solved] Loop json string in json object

by

That’s an invalid “object”. It is supposed to be an array with []. If that’s how your server is giving, you have to change the response there. In case, if you can’t do that, you may parse it right in JavaScript. var keyword = ‘{“coconut sugar”, “healthy and natural sweetener”, “low glycemic index sweetener”}’; keyword … Read more

[Solved] HTTP call using Observable not working

by

You need to return the response.json() if you are using Observable return this.http.post(this.newOrderUrl, {order: order}, this.options) .map((response: Response) => response.json() ); and in your component, call using subscribe() this._myservice.placeOrder(‘somestring’).subscribe((orders: any) => { }); 1 solved HTTP call using Observable not working

[Solved] how do I dynamically toggle a button image using different font-awesome images? [closed]

by

You can use simple boolean value in the component and *ngIf statement in HTML to show/hide necessary icon (or any other element), which will be based on that boolean value. You also need to add (click)=”isPlaying = !isPlaying” to that icons to trigger the state: HTML: <i class=”fa fa-play-circle” aria-hidden=”true” *ngIf=”!isPlaying” (click)=”isPlaying = !isPlaying”></i> <i … Read more

[Solved] Disable/Enable submit button in parent component when forms are in child component

by

In this case, you can simple use a “reference variable” and ask about “reference variable”.emailform.invalid <div> <!–use a “reference variable” to can refered to the component–> <hello #form></hello> <div class=”form-group”> <button class=”btn btn-primary” [disabled]=”form.emailForm?.invalid”>Submit</button> </div> </div> <!–just for “check” –> {{form.emailForm?.value|json}} See that “form” is the component. the component has a variable “emailForm” 1 solved … Read more