angular2-template | 易学教程

How to split a string in angular 2

阅读更多关于 How to split a string in angular 2

问题 I have an email sending scenario in which there is an input box of 'To'(whom you want to send a message). app.html <input type="text" class="form-control" [(ngModel)]="email.Tos"> Now I want that when a user input the multiple emailId in input box by comma separated, then in my model, 'Tos' value should bind in an Array of string. Like : ["abc@gmail,com" , "xyz@gmail.com"]. Now, please tell me how to split the input box value as per my requirement. 回答1: You need to use split() function.

md-menu override default max-width in Angular 2

阅读更多关于 md-menu override default max-width in Angular 2

问题 I'm using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px. <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> <md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown"> <button md-menu-item > <div class="row notification-row"> <div> <span class="image-container">

How to build nested array by using angular2 Reactive forms?

阅读更多关于 How to build nested array by using angular2 Reactive forms?

问题 I have an array like [ { "PermissionRoleModule":{ "id":1, "legend":"businessModule", "group":[ { "PermissionRoleGroup":{ "id":1, "permission":{ "controleType":"ff", "id":2, "key":"create Business" }, "roles":[ { "id":1, "name":"self" }, { "id":2, "name":"other" } ] } }, { "PermissionRoleGroup":{ "id":1, "permission":{ "controleType":"ff", "id":2, "key":"edit business" }, "roles":[ { "id":1, "name":"self" }, { "id":2, "name":"other" } ] } } ] } }, { "PermissionRoleModule":{ "id":2, "legend":

Angular 2 google map implementation

阅读更多关于 Angular 2 google map implementation

问题 I'm new to angular 2. I wanted to use google map API for direction service and implemented the example shown in https://developers.google.com/maps/documentation/javascript/examples/directions-simple to my project as shown below code. But for some reason the map is not loading. Can someone help me with this? map.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Directions service</title> <style> html, body {

Get file name from input type file Angular2

阅读更多关于 Get file name from input type file Angular2

问题 I want get the file name from my html input tag in a modal view and save it using Angular2. Can someone help me? 回答1: You can do next: HTML: <input type="file" (change)="fileEvent($event)" /> TypeScript: fileEvent(fileInput: Event){ let file = fileInput.target.files[0]; let fileName = file.name; } 回答2: You can try a more elegant option: HTML: <input #file type="file" (change)="updateFile(file)"> Script: updateFile(file: HTMLInputElement) { let name = file.value; } 回答3: HTML <button (click)=

ngOnChanges not firing if an @Input is receiving an object

阅读更多关于 ngOnChanges not firing if an @Input is receiving an object

问题 Parent component template: <my-component [param]="whatever"></my-component> Parent component code: whatever = { value1: 0, value2: 1, value3: 'foo' }; Child component code: @Input() public param: any; ngOnChanges() { console.log('Received input: ', param); } This isn't working. Any change to whatever will be unnoticed by the child component and ngOnChanges won't fire. It also doesn't work if I try to use a setter: @Input() set param(value) { console.log(value); } And it doesn't help if I try

Why angular 2 ngOnChanges not responding to input array push

阅读更多关于 Why angular 2 ngOnChanges not responding to input array push

问题 My angular application stuck with a issue, i used input as array and pushed a value to the array when the click event arise. But the ngOnChanges not firing when the array push is done. Is there a way to fire ngOnChange My Code is ts file is @Component({ selector: 'adv-search', templateUrl: './app/modules/result.html' }) export class InputComponent { @Input() metas:any=[]; ngOnChanges() { console.log(this.metas); } } My Selector Tag <adv-search [metas] = "metaIds"></adv-search> Click Event

Angular 2: access an element from the Component, getDocumentById doesn't work

阅读更多关于 Angular 2: access an element from the Component, getDocumentById doesn't work

问题 I have an Angular 2 component where I want to retrieve an element div <div id ="myId"> by its id. I try doing: document.getElementById("myId") in my component (TypeScript), but i get an error: "cannot find name document". I see that in other posts we can do something similar using @ViewChild, however I don't see how we can use this with a div, any ideas? 回答1: You can use @ViewChild with a div by adding a TemplateRef. Template <div id ="myId" #myId> Component import { Component, ViewChild,

ngIf - else vs two ngIf conditions [closed]

阅读更多关于 ngIf - else vs two ngIf conditions [closed]

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 2 years ago . Consider the following code sample: <div *ngIf="condition; else elseBlock">  </div> <ng-template #elseBlock> <div>  </div> </ng-template> Another way I can achieve the same functionality is: <div *ngIf="condition"> <!--

p-dialog onHide not working in angular 2 component - primeng

阅读更多关于 p-dialog onHide not working in angular 2 component - primeng

问题 I'm using primeng in an angular 2 application and facing this issue (stackoverflow question) Although the plunkr provided in the accepted answer works but it doesn't in my scenario. I have a separate component that loads the based on an input from the parent component. I want to toggle the visibility flag when the child component is closed/hidden. Here's the code snippet <p-dialog header="Assets Management" [(visible)]="showDialog" modal="modal" [closable]="true" (onHide)="close()" appendTo=