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
Related
Parsing Error: Unterminated JSX contents. Not sure why it keeps on saying that I need another tag. Also, the one thing that I have trouble with is what to do with the self-closing HTML tags. I don't know what to do with them for JSX.
I have tried to match all of the tags and used Atom to create an Html file and a bracket matcher. I have no idea why it keeps giving me this error. I thought to add a starting tag for the self-closing tags.
import React from 'react';
import linkedinIcon from "./footer-component/linkedin-icon.png";
export default class Resume extends React.Component {
render(){
return (
<div className="container">
<div className="col-md-12">
<h1>Résumé</h1>
<h3>SUMMARY</h3>
<p>Passionate front-end web developer with 3 years of experience using JavaScript, HTML5, CSS, Bootstrap and Javascript frameworks to build the users experience and user interface for client-facing webpages. Specializes in React, HTML, Bootstrap,
and CSS</p>
<hr>
</hr>
<h3>Technical Skills</h3>
<ul>
<li>Front-end</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap 4</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Embedded JavaScript</li>
<li>REACT</li>
</ul>
<li>Other</li>
<ul>
<li>Git</li>
<li>GitHub</li>
</ul>
</ul>
<h3>Work Experience</h3>
<p>Operations Summer Intern, Benetech | Palo Alto, California | 2019 - 2019</p>
<ul>
<li>Created more than 20 landing pages in HTML5, CSS3, and Bootstrap 4</li>
<li>Implemented CSS/Bootstrap to design multiple responsive web pages</li>
<li>Maintained front-end code and documentation standards</li>
</ul>
<hr>
</hr>
<h3>Education</h3>
<div className="row">
<div className="col-md-2">
Expected in 06/2020
</div>
<div className="col-md-10">
<p><b>High School Diploma</b>
<br></br>
<b>Fusion Academy</b> - Palo Alto</p>
</div>
</div>
);
} // END OF RENDER
} // END OF Resume
Parsing error: Unterminated JSX contents. Hope errors are gone.
You didn't close two top div elements (.container and .col-md-12)
You are missing two </div> tags at the end for .container and .col-md-12.
Also, you should probably use <hr /> only, without the closing tag. HTML says:
Start tag: required, End tag: forbidden
<hr></hr> is valid XHTML, but you should use the above for compatibility reasons.
I have declare a Array of object in angular 4 like this
public onlinUsers;
I Used this like here
<div class="row" >
<h2>Online users</h2>
{{onlinUsers}}
<div *ngFor="let i of onlinUsers">
<a (click)="openPrivate(i.name)">{{i.name}}</a>
</div>
</div>
and updating it here like this
ngOnInit() {
this.socket.on('onlineUsers',function(data){
this.onlinUsers=data.data
console.log( this.onlinUsers)
})
}
console.log working fine
Why my html is not being rendered . please help
this.socket.on('onlineUsers',function(data){
should be
this.socket.on('onlineUsers', (data) => {
otherwise this won't work as you expect inside the function.
Search for arrow functions for more details.
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.
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>
I'm using Ionic as an example for this, but I figure it's a general Angular 2 question.
page1.ts
import {Page} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
constructor() {
}
}
page1.html
<ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<ion-slides pager>
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<p>
The number one app for everything awesome.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
</ion-slide>
</ion-slides>
</ion-content>
How do I programatically reference the ion-slides object from the constructor of the Page1 class?
I had assumed via some sort of #reference but I'm not sure of the syntax
If ion-slides is a component or a directive, and there is only one instance in the template, use #ViewChild:
#ViewChild(IonSlides) ionSlides:IonSlides;
This assumes the component class name is IonSlides.
this.ionSlides will not be available in the constructor. It will be available in lifecycle hook ngAfterViewInit(), as documented in the ViewChild API page:
ngAfterViewInit() {
console.log(this.ionSlides);
}
Yes, it's an angular question.You can use #ViewChild decorator to access child component. like:
#ViewChild(CountdownTimerComponent)
private _timerComponent:CountdownTimerComponent;
See the angular2 doc for the detail, not to hard.
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child
PS. if you have more than on components in same type like Button, use
#ViewChildren(Button) buttons: QueryList<Button>;