angular2-template

I 'am facing this frustrating issue There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 This is what my app.module.ts contains import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { LocationStrategy, HashLocationStrategy

Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is shown, what does it mean here is parent component: @Component({ selector : 'parent-component', directives : [child], template : ` <h1 class= "text-center">ToDo App</h1> <div class = "form-group"> <lable>Task</lable> <input type = "text" class = "form-control" #task> <lable>Detail</lable> <input type = "text" class = "form-control" #detail > <button type = "submit" class = "btn btn

I have a component which contains a textarea which is hidden by default : <div class="action ui-g-2" (click)="toggleEditable()">edit</div> <textarea [hidden]="!whyModel.inEdition" #myname id="textBox_{{whyModel.id}}" pInputTextarea focus="true" [(ngModel)]="whyModel.description"></textarea> When I click on the "edit" div I want to show the textarea and put focus on it : @ViewChild('myname') input: ElementRef; ... private toggleEditable(): void { this.whyModel.toggleEditable(); this.input.nativeElement.focus(); } The "show" part is working but not the focus part. What do I miss? Bindings are

I am struggling with using a standard angular2 pipe in a non-standard way and I was wondering if there are any ways around it. Assume I have a variable which its value equals the definition of a standard pipe, for example, the common "date:'medium'" pipe. let a = "date:\':medium\'"; Now, somewhere in my html, I would like to be able to use this "a" variable the following way: <p>{{myRecord.date | a}}</p> And I want this "a" to have the same effect of the date pipe it contains. Is there any way to achieve this? 来源： https://stackoverflow.com/questions/43788650/using-pipe-name-as-a-variable-in

In Angular 2, creating a simple app but when formBuilder is attached with DOM control in case of select list , First option is coming blank - even if I provided some initial value in formBuilder that value is not coming to DOM element Before FomBuilder Select List Genral LDAP After FomBuilder Select List No option appearing initially Genral LDAP File 1 - form.component.ts import { Component } from '@angular/core'; import { FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms'; @Component({ moduleId : module.id, selector : 'login', templateUrl :

I want to understand the difference between template reference variable notations as mentioned below in the input text boxes. <input type="text" name='name' #name [(ngModel)]='model'> <input type="text" name='name' ref-name [(ngModel)]='model'> What's the difference between using #name and ref-name . Does the scope of the variable changes on using ref-name ? Can anybody please suggest the best practice and reason ? They are two different syntaxes for literally exactly the same thing. You can think of it this way: some people (and editors) don't like the new '#variable' syntax, so Angular

I try to make ListView component using ngForTemplate for custom templates list-view.component.html <div class="list-view"> <template ngFor [ngForOf]="items" [ngForTemplate]="template"> </template> </div> list-view.component.ts @Component({ selector: 'm-list-view', styleUrls: ['./list-view.component.less'], templateUrl: './list-view.component.html' }) export class ListViewComponent { @Input() items: any[] = []; @ContentChild(TemplateRef) template: any; } When I use it like this: <m-list-view [items]="categories"> <template let-item="$implicit"> **some HTML markup** </template> </m-list-view>

I would like to implement UI matrix pattern, which should generate dynamically. By receiving input parameter it should decide what would be UI matrix pattern dimensions: For example 9X3 elements: pattern 9x3 elements I use Angular2.js, typescript, SCSS. html tamplate and .ts looks: import {Component, Input, OnInit} from 'angular2/core'; import {NgFor} from 'angular2/common'; @Component({ selector : 'game-pattern', moduleId : module.id, templateUrl: 'game-pattern.component.html', styleUrls : ['game-pattern.component.css'], directives : [NgFor], }) export class GamePatternComponent implements