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>
Related
#angular/upgrade/static
I am trying to upgrade an AngularJS controller to Angular context using UpgradeModule from '#angular/upgrade/static'
When I change ng-show to ng-if on span or div the enclosed content does not display as expected
Using the stackbliz code is easier to see the issue,
https://stackblitz.com/edit/angular-xcqzsy
Angular CLI: 7.0.6
Node: 9.5.0
OS: win32 x64
Angular: 7.0.4
npm: 5.6.0
I am trying to use use AngularJS component in Angular application, and in the issue in this markup is, the contained span block with ng-repeat does not display, If I change the ng-if on the parent div to ng-show then the inner markup appears as expected
<div ng-if="vm.showMe == 'SHOW_ME'">
<span ng-repeat="col in vm.colCollection">
<h4 title="{{col.appName}}">Testing: {{col.appName}}</h4>
</span>
</div>
This will working same as ng-show.
<span ng-if="vm.allowed" ng-repeat="col in vm.colCollection">
<h4 title="{{col.appName}}">Testing: {{col.appName}}</h4>
</span>
I have ng-repeat and I want to change the enter/leave animation based on variable from the controller(vm).
I found this (http://www.nganimate.org/) but its for angular 1.1.5 and I am using 1.5.
How can I do that?
Thanks!
Just create a few animation classes in your style sheet and then switch them via ng-class based on whatever variable from the vm you like. Below could be your markup:
<ul>
<li ng-repeat="item in vm.items track by item.id"
ng-class="{
'animation-1-class': vm.varOfYourChoice,
'animation-2-class': !vm.varOfYourChoice
}"
></li>
</ul>
And your style sheet:
.animation-1-class.ng-enter,
.animation-1-class.ng-leave.ng-leave-active { ... }
.animation-1-class.ng-leave,
.animation-1-class.ng-enter.ng-enter-active { ... }
.animation-2-class.ng-enter,
.animation-2-class.ng-leave.ng-leave-active { ... }
.animation-2-class.ng-leave,
.animation-2-class.ng-enter.ng-enter-active { ... }
And here is the relevant documentation on angular animations for the version of AngularJs you're using.
The problem was that if I create css with the same name as animation.css, the animation.css always take over, so I just add a prefix to my class, and its fixed the problem.
I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.
If I start to type in the textbox the autocomplete popup opens with potential matches:
However, if I click on one of the matches nothing happens and the underlying angular model is not updated:
The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:
This is the template I'm using:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
This is the relevant front-end code:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Here's our angular model. Note that we're using Typescript in this project:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.
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
Below is my code,which I have tried
UI-sortable option is not working in this line
<select ng-model="selectedItem" ng-options="i.items as i.items for i in curItem" ui-sortable="sortableOptions"ng-init="selectedItem=curItem[0].items"></select>
ui-sortable library should import in the top of the application Controller.