I am trying to send data from one component to another using input attr.
but I am getting this error
VM575 zone.js#0.6.17?main=browser:484 Unhandled Promise rejection: Template parse errors:
Can't bind to 't' since it isn't a known property of 'row-item'.
1. If 'row-item' is an Angular component and it has 't' input, then verify that it is part of this module.
2. If 'row-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message.
(" <ul>
<li *ngFor="let tt of todoService.todos">
<row-item [ERROR ->][t]='tt'></row-item>
</li>
I added this in my demo
import {Component, Input} from "#angular/core";
#Component({
selector:'row-item',
template :`<div>
<span>{{t}}</span>
</div>`
})
export class TodoRow{
#Input t;
}
used like this
#Component({
selector: 'todo-list',
template: `<div>
<ul>
<li *ngFor="let tt of todoService.todos">
<row-item [t]='tt'></row-item>
</li>
</ul>
</div>`
})
here is my code
http://plnkr.co/edit/WXgdKF2gx9Kpj7eqmDJv?p=preview
Your declaration should be something like this:
#Input() t;
You forgot to add () while defining you input for the component.
import {Input} from '#angular/core';
Input() t;
You should try providing base name while providing input for the component:
#Input('t') t;
Hope this helps.
Related
To my dismay angular no longer supports the ng-include directive. My code base uses hundreds of shared partial html files. I cant seem to find any documentation. Can anyone point meet in the right direction. Is the best practice just to componentize every html file?
You can use ngTemplateOutlet directive as an alternative to ng-include in angular by passing a TemplateRef. Here I mentioned a sample code to do it.
#Component({
selector: 'child',
template: `
<div>
child template which includes myTemplate
<ng-container [ngTemplateOutlet]="myTemplate"></ng-container>
</div>`
})
export class ChildComponent {
#Input() myTemplate: TemplateRef<any>;
}
#Component({
selector: 'app-root',
template: `
<p>Parent</p>
<child [myTemplate]="myTemplate"></child>
<ng-template #myTemplate>hi julia template!</ng-template>
`
})
export class AppComponent {
#ViewChild('myTemplate', {read: TemplateRef}) myTemplate: TemplateRef<any>;
}
I'am looping on DOM element of angular component with ngfor like that
<td>
<button class="dropdown-item" idgroup={{compte_ingroup}} href="#">
action
</button>
</td>
my question is about to know how to add reference to element create in loop.
this issue happen to me ==> Can't bind to 'idgroup' since it isn't a known property of 'button'
please what I'am doing wrong?
If what you have is a component which template is
<td>
...
</td>
you should provide a property to it called idgroup, and when you invoke that component should be something like this:
<app-mycomponent *ngFor="let myelement of elementsList" [idgroup]="myelement.idgroup"></app-movie>
and in the component definition:
#Component({
...
})
export class MyComponent {
#Input() idgroup: any;
...
}
I am following the example given here https://valor-software.com/ng2-bootstrap/#/modals
But when i put the template in my html
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
.........
.......
</div>
i also have below entry in my app.module.ts
import { ModalModule } from 'ng2-bootstrap';
#NgModule({
imports: [ModalModule.forRoot(),...]
})
and below message shows up, i am not sure what i am missing
EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("
</p-dialog>
<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog" aria-labell"): PreCheckComponent#80:32
Can't bind to 'config' since it isn't a known property of 'div'. ("
</p-dialog>
according to guide i dont have to import anything to my component
You need to import ngx-bootstrap modal module on your module like below:
import { ModalModule } from "ngx-bootstrap";
#NgModule({
imports: [
ModalModule.forRoot()
]
})
You must be missing the below line in your component
#ViewChild('staticModal') public staticModal:ModalDirective;
For more information on ng2-bootstrap modal you can see this post which contains the demo as well.
Just incase if you are on this thread because you are getting same error even if you have added following line to NgModule
ModalModule.forRoot()
Make sure your import is the correct one.
Correct import
import { ModalModule } from 'ngx-bootstrap/modal';
Wrong import
import { ModalModule } from 'ngx-bootstrap/modal/public_api';
You are missing ModalDirective.
#ViewChild('yourModal') public YourModal:ModalDirective;
I'm trying to follow a tutorial. This is a simple page which displays courses. I'm getting below error in console. Angular 2 dependency is "angular2": "2.0.0-beta.7". I have tried using '#' in stead of 'let'.
Can't bind to 'ngFor' since it isn't a known native property
("{{title}}
]*ngFor="let course for courses">
{{course}}
Module course.components.ts
import {Component} from 'angular2/core';
import {CoursesService} from './courses.service';
#Component({ selector:'courses',
template:`<h1>Courses</h1>
{{title}}
<ul>
<li *ngFor="let course for courses">
{{course}}
</li>
</ul>
`,
providers:[CoursesService]
})
export class CoursesComponent
{
title="The title of courses page";
courses;
constructor(coursesService:CoursesService)
{
this.courses = coursesService.getCourses();
}
}
Module course.service.ts
export class CoursesService
{
getCourses():string[]
{
return ["Course1","Course2","Course3"];
}
}
You missed for in front of courses:
<li *ngFor="let course of courses">
and import your service file correctly.
Also I have created a plunker for you at: http://plnkr.co/edit/ldpRkJLR89e6aF4McdQD?p=preview
Hope this help!
Angular 2 has a final release several weeks ago and you should update to this final version to catch the change and notes that in 2.0.0.beta.7 the # is not yet deprecated
I'm using Angular 2 RC1 and I'm trying to use ngFor. I've imported import {Component, Input} from 'angular2/core'; and I know angular is working (I've tried to display a variable <div>{{ myVar }}</div> and it works)
I keep getting Can't bind to 'ngFor' since it isn't a known native property when doing:
<div *ngFor="let item of list">{{item}}</div>.
I've tried to import import {NgFor} from 'angular2/common'; and added it to my directives with no success.
The litterature online is confusing as it seems the Angular team has changed between beta versions and RC...
You are importing from 'angular2/core' instead of '#angular/core', so you have to use '#' instead 'let':
<li *ngFor="#item of list">
{{ item }}
</li>