Avoid duplicating *ngIf Angular 2

Issue Calling functions inside the template causes infinite calls <div>{{ renderHtml() }}</div> The same behavior depicts inside *ngIf expression While the template has multiple expressions, writing duplicating *ngIf expression inside the template doesn’t fit DRY principle In some angular projects,

Continue reading

why the text is not display in angular?

Issue I am trying to display component text in angular 2 .but it is not display .could you please tell me where I am doing wrong ? here is my code http://plnkr.co/edit/PrWxwf3wT5COVxRwIpqX?p=preview <!DOCTYPE html> <html> <head> <script src=”https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js”></script> <script src=”https://code.angularjs.org/tools/system.js”></script>

Continue reading

angular2 custom directives inputs syntax

Issue I create a custom directive and set the selector value to be “[unless-directive]“. The directive get a Boolean and use it to change the view as so: import {Directive, TemplateRef, ViewContainerRef} from ‘angular2/core’; @Directive({ selector: ‘[unless-directive]’, inputs: [‘givenBoolean :

Continue reading

Angular2. Exception: No Directive annotation found on Alert

Issue I am getting the following exception in my browser logs: No Directive annotation found on Alert Stacktrace: Error: No Directive annotation found on Alert at new BaseException (webpack:///./~/angular2/src/facade/exceptions.js?:15:23) at DirectiveResolver.resolve (webpack:///./~/angular2/src/core/linker/directive_resolver.js?:41:15) at RuntimeMetadataResolver.getDirectiveMetadata (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:41:51) at eval (webpack:///./~/angular2/src/compiler/runtime_metadata.js?:98:62) at Array.map

Continue reading

Angular2 + MaterialDesignLite: Add html property dynamically

Issue I’m working with Angular2 and MaterialDesignLite and want to achieve a menu just like this one: <ul class=”mdl-menu mdl-menu–bottom-left mdl-js-menu mdl-js-ripple-effect” for=”demo-menu-lower-left”> <li class=”mdl-menu__item”>Some Action</li> <li class=”mdl-menu__item mdl-menu__item–full-bleed-divider”>Another Action</li> <li disabled class=”mdl-menu__item”>Disabled Action</li> <li class=”mdl-menu__item”>Yet Another Action</li> </ul> Let’s

Continue reading

Angular2 select issue

Issue The following code used to work in Angular 2 beta 13: <select (change)=”handleChange($event)”> <option value=””>– please choose an option –</option> <option *ngFor=”#option of options” [value]=”option.id”>{{ option.name }}</option> </select> The options array can be as simple as [{id: 0, name=”First”},

Continue reading

Typing JSON objects coming from the backend as proper typescript classes with methods

Issue I am trying to map the json returned from the backend to proper typescript classes on the angular side. Here is my backend code: findMessagesWithOtherUserAccount(otherId:Number):Observable<Message[]> { return this.http.get(‘/api/message/find-messages-with-other-useraccount/’ + otherId) .map(this.extractMessages); } private extractMessages(res:Response) { let body = res.json();

Continue reading

Angular2 Http get

Issue I am trying to be pull data from API using Angular2, and bind it to view. After request been done, my component only gets array object [object Object],[object Object],[object Object]. Can I get any help on extracting the object

Continue reading

Angular 2 RC2 New Forms

Issue As suggested in article: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub that in order to use new forms in RC2 we need to disable deprecated forms using below code: import {disableDeprecatedForms, provideForms} from ‘@angular/forms’; bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ]) Which apparently means that we now

Continue reading

Angular 1 to Angular 2 Directive Ripple Effect

Issue Can anyone please guide how to port the below Angular 1 directive to Angular 2: (function() { ‘use strict’; angular.module(‘whimsicalRipple’, []) .config(function() { var styleEl = document.createElement(‘style’), styleSheet, rippleCSS, rippleLightCSS, rippleKeyframes, rippleWebkitKeyframes; rippleCSS = [ ‘-webkit-animation: ripple 800ms ease-out;’,

Continue reading

*ngFor is not working in angular 2

Issue app.module.ts import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; import { routing } from ‘./app.routing’; import { HttpModule, JsonpModule } from ‘@angular/http’; import

Continue reading

Update template with received data

Issue I’ve managed to retrieve a set of data from a post request, but now the view does not update when I assign it. @Component({ selector: ‘news-section’, templateUrl: ‘./news-section.component.html’, styleUrls: [‘./news-section.component.scss’], providers: [ NewsService ], }) export class NewsSectionComponent implements

Continue reading

angular 2 data binding template for @input

Issue I’m curious to know how you guys would convert binding a data input from template: `<guage-bar [guage]=guageBar></guage-bar>` to doing something like this let data = new PercentValue(20, 100); let guageBar = new GuageBar(this.data,’Database Health’); GuageBarComponent.guage = this.guageBar; I’ve tried

Continue reading

Cannot bind json data to view Angularjs2

Issue I’m trying to bind json data to template, but I keep getting some exceptions. Here’s my code: account.ts export interface Account{ AccountType:string; AmountHeld:string; AvailableBalance:string; } account.service.ts import { Injectable, Inject } from ‘@angular/core’; import { Observable } from ‘rxjs/Observable’;

Continue reading

Angular 2 not showing correctly values in input

Issue I’ve this component template <!– Some initial page code –> <sm-modal title=”Create new movement” icon=”exchange” #editStorageModal> <modal-content> <form class=”ui form error” (ngSubmit)=”saveEdit()” #editStorageModalForm=”ngForm”> <!– Other stuff –> <table class=”ui celled table”> <thead> <tr> <th>Product</th> <th>Amount changed (negative for removals)</th>

Continue reading

Angular 2 Router 3.0.0 still displaying /#/ hash on route

Issue My package json has “@angular/router”: “3.0.0” My app routes: export const routeConfig: Routes = [ {path: ”, redirectTo: ‘use-cases’, pathMatch: ‘full’}, {path: ‘use-cases’, component: UseCasesComponent}, {path: ‘add’, component: AddComponent}, {path: ‘github’, component: RepoBrowserComponent, children: [ {path: ”, component: RepoListComponent},

Continue reading

Click event in ng2-dragula bag not working

Issue I’m using Angular 2 and ng2-dragula. I want to make the drag ‘n’ drop items in a dragula bag clickable. This is my app.component.html: <div id=”rootFrame”> <div class=”tasksFrame”> <div id=”tasksCont” class=’container’ [dragula]='”first-bag”‘> <div (click)=”onClick(‘ha’)”>Task 1</div> <div (click)=”onClick(‘ba’)”>Task 2</div> <div

Continue reading

Importing ng2-bootstrap modal in Angular2

Issue I’m trying to use modal of ng2-bootstrap. So I configured everything equals to the examples as below: import { ModalModule } from ‘ng2-bootstrap/ng2-bootstrap’; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, … ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(ROUTES),

Continue reading

Get custom html attribute values in angular2

Issue I am using Angular 2 to build my application. This is my code so far: Template <select class=”form-control input-xs” [(ngModel)]=”filter.coordinatorId” name=”coordinatorId” (ngModelChange)=”onCoordinatorChange($event)”> <option *ngFor=”let coordinator of coordinators; let i = index” [value]=”coordinator.id” [selected]=”i==0″>{{coordinator.name}}</option> </select> Component onCoordinatorChange(coordinatorId: number){ alert(coordinatorId); //business

Continue reading

Angular2 render template

Issue I have two components, ComponentA uses ComponentB. ComponentB is a table which can retrieve data, options and a template which defines the table content. I want ComponentB to be a Component to render different tables. I have no idea

Continue reading

Angular2 TemplateRef Selector

Issue In my datatable project, developers have the ability to declare templates in the table declaration to be used for the header cell and the body cell. <datatable> <datatable-column name=”Name”> <template let-column=”column”> Header: {{column.name}} </template> <template let-value=”value”> Hi: <strong>{{value}}</strong> </template>

Continue reading

Angular 2 external style doesn't get inlined to header

Issue I have this component definition in typescript: import {Component, ViewEncapsulation} from ‘angular2/core’; @Component({ selector: ‘my-app’, templateUrl: ‘/views/sandbox.html’, styleUrls: [‘/styles/sandbox.css’], styles: [`.wow { background-color: red; }`], encapsulation: ViewEncapsulation.Emulated }) export class SandBox { } According to this article: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html both

Continue reading

Template not updating after model changed

Issue I iterate over an array containing objects: <tr *ngFor=”let file of files | orderBy: ‘id’:ascending:true | paginate: {id: ‘FilePagination’,itemsPerPage: 20, currentPage: p}”> <th [innerHTML]=”project.files.indexOf(file)+1″ scope=”row”></th> <td><a href=”{{file.uri + token}}” target=”_blank”><i class=”fa” [class.fa-file-audio-o]=”types.audio.includes(file.type)” [class.fa-file-pdf-o]=”types.document.includes(file.type)”></i>{{” ” + file.fullName}}</a> </td> <td>{{file.size}}</td> <td>{{file.timestamp

Continue reading

Angular 2 call child selector from one child module into child module

Issue I have a directory structure of: |-resources |-views |-Typescript |-App |-app.module.ts |-app.component.ts |-Modules |-Core |-Assets |-Typescript |-core.module.ts |-core.component.ts |-Category |-Assets |-Typescript |-category.module.ts |-category.module.ts app.module.ts import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { AppComponent

Continue reading