angular2-directives

Angular 2 expression parser and ng-init directive

由 给你一囗甜甜゛ 提交于 2019-12-01 15:14:01
Basically I'm looking for a way to implement a counterpart to Angular 1.x ngInit directive. I'm aware of ngOnInit hook and the fact that it is the recommended place for initialization code. I consider ngInit directive a quick, declarative way to prototype or fix a component that shouldn't be generally used in well-written production code (although a developer has the right to choose what's best for him/her). Doing something like that in init dummy directive <p [init]="foo = 1; bar()"><p> evaluates the expression more than one time and causes Template parse errors: Parser Error: Bindings cannot

Get angular 2 service inside a custom class instantiated by me

由 拟墨画扇 提交于 2019-12-01 14:55:17
Im building an angular 2 app, and i need a way to get a reference to a service/class that is injected/instantiated by angular framework. I have a generic class...lets call it Custom class, that i use throughout the site. This class, however is instantiated by me, not angular 2. Now, i need to use some of the services instantiated by angular 2 inside that class. i.e // this is not angular component/service export default class Custom { constructor(properties) { } doSomething() { // UserService is a service that is injected into other componetns constructors, but this class is not a component. /

Angular 2 expression parser and ng-init directive

由 久未见 提交于 2019-12-01 14:06:24
问题 Basically I'm looking for a way to implement a counterpart to Angular 1.x ngInit directive. I'm aware of ngOnInit hook and the fact that it is the recommended place for initialization code. I consider ngInit directive a quick, declarative way to prototype or fix a component that shouldn't be generally used in well-written production code (although a developer has the right to choose what's best for him/her). Doing something like that in init dummy directive <p [init]="foo = 1; bar()"><p>

Register service in root AppModule or root AppComponent

由 不想你离开。 提交于 2019-12-01 12:38:58
问题 Everywhere, it is recommended to register a service in root AppModule providers array and avoid using providers array of root AppComponent. When should someone register a service in root AppComponent? Any practical example. What is the advantage of registering service in root AppModule compared to root AppComponent? 回答1: When registered at the root, the provided service is created as a singleton, as opposite to providing in the component, it will be created as many instances as you use the

Get angular 2 service inside a custom class instantiated by me

由 爱⌒轻易说出口 提交于 2019-12-01 12:14:49
问题 Im building an angular 2 app, and i need a way to get a reference to a service/class that is injected/instantiated by angular framework. I have a generic class...lets call it Custom class, that i use throughout the site. This class, however is instantiated by me, not angular 2. Now, i need to use some of the services instantiated by angular 2 inside that class. i.e // this is not angular component/service export default class Custom { constructor(properties) { } doSomething() { // UserService

How to include JQuery plugins in Angular 2?

由 浪子不回头ぞ 提交于 2019-12-01 11:04:39
i installed jquery plugin in angular 2 project Link npm i jquery-bootstrap-scrolling-tabs and add in .angular-cli.json "styles": [ "styles.css", "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.js" ], and i declare the veritable typings.d.ts declare var scrollingTabs:any; using in app.component.ts ngAfterViewInit() { $('.nav-tabs').scrollingTabs({ scrollToTabEdge: true }); } error: TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__

How to include JQuery plugins in Angular 2?

由 主宰稳场 提交于 2019-12-01 10:19:12
问题 i installed jquery plugin in angular 2 project Link npm i jquery-bootstrap-scrolling-tabs and add in .angular-cli.json "styles": [ "styles.css", "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.js" ], and i declare the veritable typings.d.ts declare var scrollingTabs:any; using in app.component.ts ngAfterViewInit() { $('.nav-tabs'

Hide on click Outside of element angular 4

由 空扰寡人 提交于 2019-12-01 08:17:25
问题 I created a side menu for my vertical navigation, so I toggle the side-menu on click. I need to close that menu on click anywhere outside that menu. I tried installing : https://github.com/chliebel/angular2-click-outside But it doesn't work for some reason, I run npm install , add the (clickOutside)="close()" to my component or side menu wrapper and nothing happens. Any help please? The directive code: import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

Can't load shared directives of a NgModule in other NgModules

由 夙愿已清 提交于 2019-12-01 07:52:38
问题 Following this discussion, where I had the same problem : I couldn't import the directives of angular2-materialize in more than one module, without having the error message "Type X is part of the declarations of 2 modules" I decided to follow the solution given : put the angular2-materialize in its own module, then import the module in my AppModule and my ChildrenModule. So my MaterializeModule : import { NgModule } from '@angular/core'; // Import Materialize CSS + Directives, like indicated

How to add/remove class from directive

由 不羁岁月 提交于 2019-12-01 01:51:59
问题 Using a custom directive how would you add/remove a class on the host element based on a specific conditions? Example: @Directive({ selector: '[customDirective]' }) export class CustomDirective { constructor(service: SomService) { // code to add class if (service.someCondition()) { // code to remove class } } } 回答1: If you don't want to use the ngClass directive (Hint: you can pass a function to [ngClass]="myClasses()" if it would be to messy inline in your template) you can just utilize the
订阅 angular2-directives