angular2-template

So this is a 2 in 1 question. First, I am trying to fire a function when an element, within a components html, loads. I tried it numerous ways, like: <div [onload]="myFunction()"> this however results in the function being called multiple times, 10 to be exact. My guess is this is not the way to go, but I am not familiar enough to get it working properly. Also I would like to send the element along as a parameter. For example doing <div #myDiv (click)="myFunction(myDiv)"> does work, but obviously this isn't fired onload of said element. Whats the proper way here, or am I obligated to do a

I'm using Angular2 with Semantic UI as a css library. I have this piece of code: <div class="ui three stakable cards"> <a class="ui card"> ... </a> <a class="ui card"> ... </a> <a class="ui card"> ... </a> </div> the cards are rendered nicely with a space between and such. like this: refer to cards section in the link since the cards represent some kind of view I thought of making a component out of it, so now the code is: <div class="ui three stakable cards"> <my-card-component></my-card-component> <my-card-component></my-card-component> <my-card-component></my-card-component> </div> but now

I currently have an Angular 2 app up and running that looks as follows: App.component is bootstrapped when visiting the site. The template for App.component has all component tags (for example menu.component, search.component and the router-outlet). What I basically need is the following: currently a visitor is directly redirected to the Login page because the user needs to login. He is still able to see the menu and all components that are only there for logged in users. What would be the best strategy to add an extra template layer, so not logged in users get redirected? The way that I've

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"> Option 1 </span> </div> </div> </button> </md-menu> In CSS file, I do this: .mat-menu-panel.notifications

I have an array that I can loop through using ng-for syntax. However, ultimately I want to access just a single element of that array. I cannot figure out how to do that. In my component script I have export class TableComponent { elements: IElement[]; } In my template, I am able to loop through the elements via <ul> <li *ngFor='let element of elements'>{{element.name}}</li> </ul> However, trying to access an item in the element array by secifically referencing an item utilizing x {{elements[0].name}}x does not seem to work. The formatting in the template is pretty explicit, so I want to be

Basically, I have <form #f="ngForm" (ngSubmit)="save(f.form)" #formElement> ... <button class="btn btn-primary" #saveButton>Save</button> </form> I want to be able to trigger submit() from the component. I've tried @viewChild('formElement') and renderer.invokeElementMethod to trigger click() . NgForm has property ngSubmit which is EventEmitter . So doing emit() on this property from the component will trigger a submit. Also you need to use your f variable instead of formElement because f is referencing to ngForm . @ViewChild('f') form: NgForm; form.ngSubmit.emit(); 来源： https://stackoverflow

I'm developing an app in ng2 and I'm struggling with something. I'm building a calendar where you can pick a date-range and I need to react on click & mouseenter/mouseleave events on day cells. So I have a code (simplified) like this: calendar.component.html <month> <day *ngFor="let day of days" (click)="handleClick()" (mouseenter)="handleMouseEnter()" (mouseleave)="handleMouseLeave()" [innerHTML]="day"></day> </month> But this gives me hundreds of separate event listeners in the browser's memory (each day's cell gets 3 event listeners, and I can have up to 12 months displayed at a time so it

Let's say I got a component with a fixed input parameter type, @Component({ selector: 'fixed', template: '<div>{{value}}</div>' }) export class FixedComponent { @Input() value: string; } How do I go about making that parameter type generic, i.e. @Component({ selector: 'generic', template: '<div>{{value}}</div>' }) export class GenericComponent<T> { @Input() value: T; } That is, how do I pass the type in the template of the parent component? <generic ...></generic> It seems that when using AOT compilation the only way to do this is to replace the generic type with 'any'. See https://github.com