I have created an angular directive for styling a table. But table loses the styles defined in the directive when pagination is clicked

Issue I have created the following custom directive in Angular: @Directive({ selector: ‘[tableTheme]’ }) export class TableThemeDirective implements OnInit, AfterViewInit { tableElement: HTMLTableElement; constructor(private el: ElementRef, private renderer: Renderer2) {} ngOnInit(): void { this.tableElement = this.el.nativeElement; this.renderer.setStyle(this.tableElement, ‘width’, ‘100%’); this.renderer.setStyle(this.tableElement,

Continue reading

mouseenter with condition in angular

Issue I have a button in angular: <button type="button" id="bulkInputButton" (click)="toggleBulkInput()" #bulkInputButton>Show Bulk Input</button> I want to show different tooltip based on some condition. Basically I want to incorporate this jquery code in the button tag itself: $("#InputForm button#bulkInputButton").mouseenter(function(e) {

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 – Defining/Injecting Singleton

Issue I have an alert directive defined, like so: import { Component } from ‘angular2/core’; import { CORE_DIRECTIVES } from ‘angular2/common’; import { Alert } from ‘ng2-bootstrap/ng2-bootstrap’; @Component({ selector: ‘alert_directive’, templateUrl: ‘./shared/directives/alert/alert.html’, directives: [Alert, CORE_DIRECTIVES] }) export class AlertDirective {

Continue reading

Angular2 scope's and components

Issue All, This is what I have: user-list.component.ts export class UserListComponent { public userSerivce: UserService; public deleteUser(id) { this.userSerivce.delete(id); } } user-list.component.html <div> <some-reusable[deleteFunc]=”delete” > </some-reusable><!– this will bind “delete” on the user- list.component, to “deleteFunc” on SomeReusableComponent–> </div> some-reusable.component.ts

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

Access local variable in Component fails in Angular 2

Issue I want to get the DOM element and initialize a JSON Editor without using ElementRef. Code: import {Component, ViewChild} from ‘angular2/core’; @Component({ selector: ‘json-editor’, template: ` <div #container class=”json-editor-container”></div> ` }) export class JSONEditorComponent implements OnChanges { @ViewChild(‘container’) private

Continue reading

Navigation Through Component – Angular 2

Issue I can navigate perfectly through View using [routerLink]. When I am trying to navigate through Component using this.router.navigate([‘/Todos’]) or this.router.navigateByUrl(‘/todos’), initially the router is changing correctly to index.html#/todos and then the router is automatically changing to index.html?#/login. I don’t

Continue reading

Router directives in two places for same purpose

Issue I am having a bit of trouble understanding the logic here root-component import { Component } from “angular2/core”; import { TopNavigationComponent } from “./shared/navigation.component”; import { ArcListComponent } from “./arc/arc-list.component”; import { ArcNewItemComponent } from “./arc/arc-new-item.component”; import { RouteConfig

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: Change detection timing for an auto-scroll directive

Issue I’ve been working on a simple auto-scroll directive for chat-display: @Directive({ selector: “[autoScroll]” }) export class AutoScroll { @Input() inScrollHeight; @Input() inClientHeight; @HostBinding(“scrollTop”) outScrollTop; ngOnChanges(changes: {[propName: string]: SimpleChange}) { if (changes[“inScrollHeight”] || changes[“inClientHeight”]) { this.scroll(); } }; scroll() {

Continue reading

Angular 2 Inject complex service to service

Issue I have three services and one component: root.service abstarct-child.service extend-child.service app.component The root.service injects by using dependency injection the abstarct-child.service, like so: import {Injectable} from ‘angular2/core’; import {AbstractChildService} from ‘./abstarct-child.service’; @Injectable() export class RootService { constructor(private _abstractChildService: AbstractChildService) {}

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 – Trigger event in directive from component

Issue I am trying to trigger an event in a directive used by a component using the EventEmitter. Component: @Component({ selector: ‘messages’, templateUrl: ‘static/pages/messages/messages.component.html’, directives: [AutoScroll], events: [‘update’], providers: [ HTTP_PROVIDERS, RoomService, ], styleUrls: [‘../static/css/messages.component.css’, ‘../static/css/app.component.css’] }) export class MessagesComponent

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

Angular 2 – highlight updated table cell

Issue How can i flash cell in table that changed its value? <tr *ngFor=”#product of products” (click)=”onSelect(product)”> <td>{{product.productName}}</td> <td>{{product.price}}</td> </tr> in component i have input for products : @Input() products:Array<ProductModel>; and there is a test timer in parent component that

Continue reading

Angular2 directive assign to template

Issue Is it possible to assign to view from directive? import {Directive} from ‘angular2/core’; @Directive({ selector: ‘[foo]’ }) export class FooDirective { this.bar:string = “baz”; } And in component’s view <div foo> bar value should be ‘baz’: {{bar}}. </div> http://plnkr.co/edit/To6hj9CJi1caz2pSF0RP?p=preview

Continue reading

Changing attributes value in angular2 template

Issue I have simple angular2 component: import {Component} from ‘angular2/core’; @Component({ selector: ‘circle’, template: `<svg height=”100″ width=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” /> </svg>`, }) export class Circle { } And I would like to dynamic change fill

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

angular 2 import of component works in VS, but gives 404 in browser

Issue I have a very simple app setup: Index.html: <!doctype html> <html> <head> <title>Angular 2</title> <!– Libraries –> <script src=”/lib/js/es6-shim.js”></script> <script src=”/lib/js/angular2-polyfills.js”></script> <script src=”/lib/js/system.src.js”></script> <script src=”/lib/js/rxjs/bundles/Rx.js”></script> <script src=”/lib/js/angular2.dev.js”></script> <!– Stylesheet –> <link rel=”stylesheet” type=”text/css” href=”/app/reddit_v2/style/semantic/semantic.min.css”> <link rel=”stylesheet” type=”text/css” href=”/app/reddit_v2/style/styles.css”> </head>

Continue reading

Access directive element

Issue How do I access the element my directive is attached to inside the directive class itself? I need the reference to the element to apply styles via the Renderer service. Using ElementRef.nativeElement works, but that is being officially discouraged,

Continue reading

Call a external function injected in Angular2

Issue I’m searching a way for execute a external function in the main component of angular like this: <head> <script> System.import(‘app’).catch(function(err){ console.error(err); }); function callback(datos){ alert(“datos: “+datos); } </script> </head> <!– 3. Display the application –> <body> <my-app [cb]=”callback”>loading…</my-app> </body>

Continue reading

Pass a component from child to a parent directive in angular 2

Issue This is my parent component : @Component({ selector : “app”, template : ‘ <app-header></app-header> <top-navigation></top-navigation> <router-outlet></router-outlet> <app-footer></app-footer> <page-js-rersources></page-js-rersources>’, directives : [AppHeader, AppFooter] }) @RouteConfig([ {path: ‘/’, name: “UserHome”, component: LandingPage, useAsDefault: true }, {path: ‘/login’, name: “Login”, component: LoginSignUp

Continue reading

Is there an equivalent of ngCsp for Angluar2?

Issue Is there an equivalent of ngCsp for Angluar2? https://docs.angularjs.org/api/ng/directive/ngCsp Solution Doesn’t look like this is implemented yet https://github.com/angular/angular/issues/5956 https://github.com/angular/angular/issues/6361 https://github.com/angular/angular/issues/1744 This comment https://github.com/angular/angular/issues/1744#issuecomment-168540571 seems to indicate that the offline template compiler that will be shipped soon will fix this.

Continue reading