Issue I have json: public example=[{ array:[item1, item2,] }, { array:[item1, item2,] }] file html: <div *ngFor="let item of example"> <div *ngIf="check(item.array)"> …</div> </div> but call function check inside ngOnInit(), it error check(…request: string[]){ return this._RolesService.checkRoles(request); } ngOnInit(): void {
Continue readingTag: angular2-template
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 readingngFor not updating when @Input updated from google map marker event
Issue I’m trying to build a simple app with angular2, I have the below component: @Component({ selector: ‘map-menu’, templateUrl: ‘./angular-app/components/map-menu.html’ }) export class MapMenuComponent { @Input() selectedMarkers: Array<google.maps.Marker>; constructor() { // setInterval(() => { // console.log(this); // }, 1000); }
Continue readingAngular2 No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)
Issue I custom modal of customModal.ts in shlomiassaf/angular2-modal. Specific, i add a input contain ngModel, it imported FORM_DIRECTIVES and directives. The issue when run ‘No provider for Renderer! (NgModel -> Token NgValueAccessor -> DefaultValueAccessor -> Renderer)’ Please help me resovle
Continue readingwhy 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 readingAngular2 : No provider for String! (child -> String) in [Array in parent
Issue 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
Continue readingangular2 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 readingAngularjs One component multiple views(Html+css)
Issue I need to figure out how I can have different views(html+css) for a component. A lot of people say that it’s better to have multiple components for each for each of those views and then use a service to
Continue readingViewChild – Angular 2 Javascript
Issue How can I use ViewChild in Angular 2 Javascript? I have referred angular.io docs and I have tried with the following code and it is not working. Can anyone help me? Thanks in advance. main.html <router-outlet></router-outlet> app.component.js (function (app)
Continue readingForm Submit Error – Angular 2 Javascript
Issue Can anyone check this image link and explain me why this error is coming after form submit. I have submitted form using (submit) and navigated to next page by using this.router.navigate([‘/Todos’]);. Here is my code, login.html <form #simpleForm=”ngForm” (submit)=”onSubmit(simpleForm,
Continue readingAngular 2 Directive with ngModel and ngControl
Issue I want to write a Angular 2 Directive, which should have the following behavior: Must be usable with and without a wrapping <form [ngFormModel]=”form”> Should use [(ngModel)] for data binding Use an Observer internally, which updates the ngModel 250ms
Continue readingAngular2. 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 readingAngular2 directives modifying its html host
Issue I’m using Angular 2 and I would like a directive to modify the behaviour of its host html element. For example, I would like an InnerDirective with selector ‘[inner-directive]’ such that: @Component({ selector: ‘[outer-component]’ template: ` <div inner-directive ></div>
Continue readingAngular2 + 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 readingError _renderer.setElementStyle "Cannot set property 'background-color' of undefined in [null]"
Issue I’m studding angular2 at the udemy course for angular2, and the teacher wrote a directive that highlight a html element. I trying to do as fallow but the to me the _renderer.setElementStyle throws exception. EXCEPTION: TypeError: Cannot set property
Continue readingAccessing arbitrary child in angular2
Issue I want to create a “my-form-group” component, consisting of a label, any type of input element (input, checkbox, …) and a div for validation results. I want to use content projection to insert the input after the label. Something
Continue readingAngular 2 async pipe not rendering/updating Observable data automatically
Issue I am facing an issue with the Angular2 router and an async pipe. I am trying to render an RxJs Observable and the data does not render automatically. One has to click on the link for the route for
Continue readingAngular2 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 readingApplying same directive to many divs in a single component, attaches event listener of that directive to only the last one
Issue I have 50 divs on a single component. I am making a directive named “lazyload”. Then I am applying this directive to all those divs. In the onInit of “lazyload” directive, I have registered for scroll event. The eventlistener
Continue readingTypescript Error TS2339: Property 'project' does not exist on type '{}'
Issue Hitting this old issue in Angular 2 RC1.. Very frustrating stuff.. has anyone go any idea what I can do here to make this compile.. The line thats causing the error is : this.project = res.project; Here is my
Continue readingTyping 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 readingMaintain treeview behaviour when branch is pre-opened in Angular 2
Issue I have a recursive treeview component which loads its data from a third-party API. It works well. What I’m seeking to do now though is open the tree at a particular branch when the tree is first rendered (long
Continue readingAngular2 Pass attribute value dynamically from html template as @input
Issue How to pass dynamic value instead of string in [email] attribute ?? I am stuck with Parse syntax error. Whether i can pass value to @input decorator dynamically by ngFor and pass as input in [email] attribute dynamically using
Continue readingAPI post call conflict Angular2 .map defaultOptions.merge is not a function in
Issue I have tried to call the API by post method but I got this error: this._defaultOptions.merge is not a function … I was checking a few answer and I tried to import and doesn’t work import ‘rxjs/add/operator/map’; import ‘rxjs/rx’;
Continue readingAngular 2 RC1: Multiple components, Todo List, adding task update
Issue Developing a todo list that is capable of adding a task. Everything works when all of the code is one component (Tasklist) and one service (Taskservice). However when trying to separate one component to multiple components(Tasklist and Addtask), the
Continue readingDelay navigating to next page
Issue My angular site works great, but when you click into a project it loads the page, right away and sometimes there is a flash while the images are pulled from the API, id like a 1 second delay, or
Continue readingPass value to a function in a different Component
Issue I have 2 components. one is a page and the other is a transition that slides over the page.. I wish to pass a value to a function in the transitionComponent but cant figure it out.. is @input the
Continue readingHow to update 2 Views with different Parameters from 1 Controller
Issue Say we have Parent controller “P” and 2 children: “A” and “B”. “A” controller has input and used in “P” template twice with different parameters: <A-app [input]=’param1′></A-app> <A-app [input]=’param1′></A-app> <B-app (flag)=”onClick($event)”></B-app> “B” controller contains a button. If I click
Continue readingHow to migrate Angular 2 RC 1 (or earlier) Forms to Angular 2 RC 2 / RC 4 New Forms
Issue I need to migrate my existing Angular 2 RC 1 app to Angular 2 RC 4. As a part of which I also need to move my existing forms to Angular 2 RC 4 New Forms. Can anyone please
Continue readingAngular 2 RC 2 Using Mobile Gestures (Swipe, Pinch, Rotate)
Issue Can anyone please guide how to use mobile gestures in Angular 2 RC2. May be something like: <div (swipeLeft)=”OnSwipeLeft()”></div> From the API can see HAMMER_GESTURE_CONFIG HammerGestureConfig under @angular/platform-browser But not sure how to use it. In some posts in
Continue readingAngular2 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 readingAngular 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 readingHow get style values from a HTMLElement with angular2 and Typescript
Issue is it possible to read out the values from an HTMLElement? The following code is working, but it has a small delay in the backwards transition. Thats the point I need the height value from the _target element. import
Continue readingAngular2 directive usage in template
Issue I have found an recursive object view component that shows an object/array structure as a structured list. Here is the working component: https://embed.plnkr.co/Anxv8zImWmD0WzizCSVT/ What i tried was to use the directive in an template that is loaded via templateUrl
Continue readingAngular2 ngIf not working in deployment environment
Issue I’ve written a very simple little Angular2 app that I’ve built to generate exercise sheets. However it seems that when I deploy the app ngIf doesn’t work (either my ISP default webserver or my own Heroku/local deployed node-http-server). When
Continue readingAngular2 datePipe returning formatted date but with an additional month
Issue This is my formatter function: public formatDate(date: Date): string { var datePipe = new DatePipe(); if (date) { return datePipe.transform(date, ‘yMd’); } else { return “–“; } }; When I use it let dateFooBar = new Date(2016, 5, 10);
Continue readingAngular2 Use sort pipe only when certain value or boolean is true
Issue My markup looks like this: <li *ngFor=”let user of usersList | orderBy : [‘name’]; let i = index;”> So is there anyway to apply orderBy pipe only when certain boolean is true? Solution How about something like <li *ngFor=”let
Continue readingHow to get return value of function of angular2 in html or markup
Issue Is there anyway to put the return value of a function in the markup for example: <p> Days diff {{compareDays(task.dueDate)}}</p> this is my function: public compareDays(date: Date): string { let oneDay = 24 * 60 * 60 * 1000;
Continue readingAngular2 how to bind to a custom component input parameter
Issue I’ve a custom component for displaying phone numbers (stm-phone-number). It has an @Input() parameter called phoneNumber. When I try to bind data to it in a *ngFor, I get this error message: Can’t bind to ‘phoneNumber’ since it isn’t
Continue readingngFor index plus 1 or incresed count by one
Issue How to get in angular 2 the index but increased by 1: <li *ngFor=”let mPrepTasks of project.upcomingMeetingsPrepTask; let i= index; let count = i+ 1;”> <p>Index {{count}}</p> </li> Solution Why not just do this: <li *ngFor=”let mPrepTasks of project.upcomingMeetingsPrepTask;
Continue readingWhy doesn't Angular2 auto detect directives and providers used in a component definition?
Issue For custom directives used inside the template, I guess it might make sense for Angular to not know the new html elements/attributes until we tell it in the “directive” property of the Component function. However, what I don’t understand
Continue readingUsing dynamic value in css in Angular 2
Issue How would i go about updating the CSS dynamically of an overlay that I have appear only when clicked on. Here is a portion of my html: <nav class=”navigation” [class.navigation–overlay]=”isItOpen”> </nav> Essentially I would like my class .navigation–overlay to
Continue readingAngular2 final release no longer supports :host ::shadow
Issue I upgraded to Angular2 final release this morning and noticed that the CSS styles I was using in previous release candidates are no longer working. I need to control the look a HTML element wihtin a child component from
Continue readingAngular2: get reference of html element inside component and then Scroll to top that html element
Issue I have this table inside my TableComponent: <table #trackerTable> I want to scroll to top of it when something happens so I try to reference it with inside my TableComponent: @ViewChild(“trackerTable”) trackerTable; and when myMethod() is triggered I try
Continue readingAngular 2 Lazy Loading and Application-wide singletons – Custom Http Class Not working
Issue I am trying to use the Angular 2 Router Lazy Loading to reduce initial load time. In my app I have customized the original Http service of the Angular to display a loader whenever any http request is initiated
Continue readingPassing Components in Angular2
Issue Lets say i wanna get very abstract and modular and i want to pass components as input to my child components. Is that possible? I understand that i can pass the inputs and create the component internally, but sometimes
Continue readingAngular 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 readingWhat's the best way to organize Routes in angular2
Issue I have questions about Routes in angular2. Today I’m using the same example as angular2 official tutorial. The code is something like this (file link): // app.routing.ts import { ModuleWithProviders } from ‘@angular/core’; import { Routes, RouterModule } from
Continue readingHow to check if Change Detection was triggered on a component
Issue In my app I want to set manual change detection. For this I set the ChangeDetectionStrategry to OnPush and whenever a change occurs in a component I manually run change detection using detectChanges. If I set ChangeDetectionStrategy to OnPush
Continue readingHow to deal with multiple null or undefined values when any object or field can be null? like this <p>{{object.object2.object3.field1}}</p>
Issue <p>{{object.object2.object3.field1}}</p> I have many <p> filled with objects that have an object which have an object that might have field and in any case object or object2 or object3 or field can be null or undefined. How to deal
Continue readingTwo way data binding between a component and a directive on the same element?
Issue <tab mousePosCollector></tab> The MousePosCollectorDirective and TabComponent both have a property x. How can property x be updated in the TabComponent when property x changes in the MousePosCollectorDirective? Standard two way data binding does not seem to be a solution
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 readingUpdate 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 readingAngular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'
Issue I created an attribute called data-menuitemtype that I’m using in a div inside of an *ngFor loop. I’ve never had issues before with creating attributes like this because it is perfectly valid HTML5 syntax, but for some reason *ngFor
Continue readingAnguar2 Route provide template for Component
Issue Is there any way that I can specify the template to be wired up to a component in a route in Angular 2? I have a component where the controller functionality is identical over three views. What I’d like
Continue readingangular 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 readingResponse.json() bind to single object using interface – RxJs/Observable fails
Issue This scenario works fine when the RESTful API returns a JSON array – but the web method I’m calling returns a single JSON object – and so the code has been converted to map a single object from <IRegistration[]>
Continue readingUsing string interpolation inside an external template resource
Issue I’m refactoring an Angular 2 component that does some template nesting. The original code was something like this: (component.ts) let subItemTemplate = require(‘./sub-item-template.html’); @Component({ selector: ‘my-component’, template: ` <div *ngIf=”isSingle”> ${subItemTemplate} </div> <div *ngIf=”isMulti”> ${subItemTemplate} </div> ` }) export
Continue readingCannot 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 readingPassing Events and urls with @Input and @Output
Issue Total beginner to angular2 and not an experienced web dev, so I apologize for any extreme stupidity that is present in this question… I’m having some trouble making a component for a dropdown select list. My goal is to
Continue readingAngular 2 – Passing a url with @Input
Issue I’m making a component for a dropdown select menu. I want to be able to load the options for the menu dynamically. I was initially thinking of doing this by using @Input to pass in the url of the
Continue readingCreating dynamic arrays in Angular2
Issue I am building a chart.js function in my angular2 web application. I want the bars in a bar chart to be red or green depending if their value is above or below a certain threshold. At the moment, I
Continue readingAngular2 components not binding the property to DOM
Issue I am playing with Angular 2for learning. I wrote a Tweet component where I am trying to show random picture, text and likes. Something like this: tweet.component.html <div class=”media”> <div class=”media-left”> <a href=”#”> <img class=”media-object” src=”http://lorempixel.com/100/100/people?1″ alt=””> </a> </div>
Continue readingAngular 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 readingtemplateUrl in Angular2 Component not loading URL
Issue this is my Component import { Component, OnInit } from ‘@angular/core’; @Component({ selector: ‘homeView’, templateUrl: ‘/home/home’ }) export class HomeViewComponent implements OnInit { ngOnInit(): void {} } I am using AngularJS 2 with TypeScript 1.8.5 and trying to create
Continue readingAngular 2 – *ngFor with conditional class
Issue I am using Angular2 and bootstrap for a component. I am trying to add a class to my tr-tag if the property “2” of the test from the *ngFor loop is equal to an imported variable named newTest. But
Continue readingInput Property Binding in Angular2
Issue Below is the code of a component which has a @Input() property. import { Component } from ‘@angular/core’; @Component({ selector: ‘cd’, template: ` <h2>{{input1}}</h2> ` }) export class cdComponent{ @Input() input1: string; } And I would like to use
Continue readingHow to get arrays from .json Ionic 2 Angular 2
Issue In applications where there is an array, and with it another 7 arrays, I can’t manage to show it in the template. Can someone please tell me how to get arrays from json? Thank you all! channel.json, comming with
Continue readingHow to define template outside component
Issue I’m trying to build a table component (with standard features) where rows should be defined as a template. At the moment I’ve tried this way (code simplified): 1) parent component @Component({ selector: ‘simple-grid’, template: `<table><tbody> <ng-container *ngFor=”let item of
Continue readingAngular 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 readingDisable the submit button for the default Dropdown value in an angular 2 Form
Issue I have a select country dropdown which has a default value called “Select”. There is a submit button at the bottom of the page which should get enabled only when the dropdown has some country values. For default value,
Continue readingAngular2 Component Instances with different CSS
Issue I have an Angular2 app with components, some of which I want to use multiple times on the same page. I originally had three components but in the spirit of refactoring I want to combine some of the functionality
Continue readingClick 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 readingImporting 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 readingIonic2 array access in template
Issue I’m trying to show data in my template coming from a json in the controller. All the alternatives I found refers to using ngFor, but I don’t want to iterate all the items, because I want to show just
Continue readingUpdate parent component title from routed child component in Angular 2
Issue I’m working my way through the Angular 2 documentation on routing. I have a sample application which shows two components which are routed and hooked up to navigation links. Here is a Plunker demonstrating the behaviour. It’s built using
Continue readingGet 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 readingAngular2 – Template pages with multi router-outlets
Issue I have read and watch many angular2 courses and tutorials and all of them describe a web page with stastic menu and static footer. So they use router-outlet to the main content. What if we have 20 pages with
Continue readingAngular2 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 readingAngular2 get values of dynamically created inputs
Issue I have this input which are created dynamically from list column, now I need to get all values of the inputs when some method occurs( imagine getAllValues() ) <div *ngFor=”let cell of column; let i = index;”> <!– Material
Continue readinginnerText not working for one column – Can't bind to 'innertext' since it isn't a known property
Issue I am just adding one more column in grid with name coordinatorName. To do that, I modified WebApi as needed and saw data, it is fine. I have problem with Angular2. Component export class WorkflowActivity{ activityName: string; assigneeName: string;
Continue readinginserting multiple copies of the same component in the Angular application
Issue I am learning Angular using the “Tour of Heroes” app. In the multiple components part, we can show hero details by clicking on the hero name. What would be the design pattern (or implementation) to have multiple instances of
Continue readingChange angular2 select/option to ul/li binded to selection
Issue I would like to change the following select, option tags to be a ul,li instead. <select [(ngModel)]=”selectedLanguage” name=”selectedLanguage”> <option *ngFor=”let lang of languages” [value]=”lang”>{{lang}}</option> </select> Ideally it would be bootrap-friendly like: <ul class=”dropdown-menu”> <li>…</li> </ul> Can someone help please?
Continue readingImplementing 'Master – detail' with router (router outlet) in Angular2
Issue I am implementing a Master-Detail screen with Angular2 router. I have a component which defines in its template a list of resources (ul/li formatted): Master part. Each resource in the list is clickable by an “routerLink” binding. In the
Continue readingHow can I use Electron's webview html element inside an angular2 template?
Issue I saw this question: How to use Electron's <webview> within Angular2 app? And it got me past my initial error but now I’m seeing zone.js?1478729974810:355 Unhandled Promise rejection: Template parse errors: ‘webview’ is not a known element: 1. If
Continue readingOutput part of two-way binding doesn't work for custom directive
Issue I am trying to implement a directive with a property that would support a two-way binding like this: [(appfocused)]=”isFocused”. A component could set its isFocused property to true to focus on an element but the variable would get reverted
Continue readingAngular 2 Unhandled Promise rejection: Template parse errors: 'app-main' is not a known element:
Issue I have two separate modules app.module.ts and core.module.ts for loading two selectors app and app-main. The folder structure is like below: |main.ts |-App | |-app.module.ts | |-Components | |-app.component.ts | |-Core | |-core.module.ts | |-Components | |-core.component.ts main.ts import
Continue readingHow to pass the value of an expression back to data target in angular2?
Issue I am trying to pass back the id of an element back to my target. I have multiple ace-editor instances on my page. I would like to know which one is sending me a “textchanged” event, so that I
Continue readingAngular2 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 readingAngular2 input text value is not showing although its model contain the value
Issue I got annoying situation with my Angular2 application, I have a table with several rows, each row contain columns with 2 way binding using [(ngModel)]. I have 2 buttons of Add and Delete and they push/splice the list of
Continue readingAngular2 Parent Component with multiple instances of child component
Issue I have a parent component with a template that references multiple instances of the same child component. The child components would have the same component/template implementation but should be instantiated multiple times and would render different data sets. I
Continue readingAngular 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 readingTemplate 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 readingAngular 2 input parameters on root directive
Issue This example shows how to use @Input() annotation on child components. My question is how do you use it on root component? For example if you modify code on the link above: @Component({ selector: ‘app’, template: ` <bank-account bank-name=”RBC”
Continue readingAngular 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 readingngFor behavior inside a <form>
Issue I’m learning about Angular2 & RxJS observables. I created a simple form that displays results of a simulated http.get and should allow the user to create a new item. I used unshift() to accomplish this (as opposed to push())
Continue readingANGULAR 2 – Component Shared Data Service
Issue this has really been wreaking my head. I have a nice little app with social login setup using Firebase and Angular 2. Everything should be realtime. Basically when a user logs in via Facebook I want their personal info
Continue readingCan we use a component inside another component in current version of Angular2?
Issue I am looking to use component inside another component in angular2 current version(V2.2.0) But previously we had option to use component inside another component using following code. import { AnotherComponent } from ‘./another-component’; @Component({ selector: ‘my-component’, directives: [AnotherComponent], template:
Continue readingWhy can't I access my angular2 class property
Issue I’m new to Angular 2 and thoroughly puzzled at this moment. I am loading a component which retrieves data from service (in JSON format), and I am apparently NOT being successful when it comes to setting a property in
Continue readingAccessing template reference variable from sibling element event within *ngFor
Issue I have a template reference variable #profiletextedit on a textarea element, within an *ngFor. I also have a (keydown.enter) event that successfully passes the variable to an event handler in my component. I also have a (click) event on
Continue reading