angular2-components

I have my custom component: @Component({ selector: 'my-custom-component', templateUrl: './my-custom-component.html', styleUrls: ['./my-custom-component.css'] }) export class MyCustomComponent { constructor() { console.log('myCustomComponent'); } } I can use it like this: <my-custom-component></my-custom-component> But how I can pass a variable? For example: <my-custom-component custom-title="My Title"></my-custom-component> And use this in my component code? You need to add Input property to your component and then use property binding to pass value to it: import { Component, Input } from '

I want to create service, which can interact with one component. All another components in my app, should be able to call this service, and this service should interact with this component. How to call component method from service? @Component({ selector:'component' }) export class Component{ function2(){ // How call it? } } From this servive? @Injectable() export class Service { callComponentsMethod() { //From this place?; } } Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components

I am developing an application using angular2. I have a scenario where I need to pass complex data (array of objects) from one component to another component(they are not parent-child, they are two separate components) while routing(using router.navigate()). I have googled this and most of the results describe the scenario of components that are parent-child. I have gone through the results and found these ways to pass the data. 1) Create Shared Service 2) Pass as route parameters 2nd approach works for me (even though, I don't like that when I have complex data as explained above). I am not

what I'm trying to do: Use something similar to the "resolveComponentFactory()", but with a 'string' identifier to get Component Factories. Once obtained, start leverage the "createComponent(Factory)" method. Plnkr Example -> enter link description here In the example, you will see the "AddItem" method addItem(componentName:string):void{ let compFactory: ComponentFactory; switch(componentName){ case "image": compFactory = this.compFactoryResolver.resolveComponentFactory(PictureBoxWidget); break; case "text": compFactory = this.compFactoryResolver.resolveComponentFactory(TextBoxWidget); break;

I need to pass an expression to a component that will be evaluated inside an component's template. For example, component: @Component({ selector: 'app-my-component', ... }) export class MyComponent { @Input items: MyClass; @Input expression: String; ... } with component's template: <div *ngFor="let item of items"> {{expression}} </div> Usage of MyComponent: <app-my-component [items]="listOfItems" [expression]="'[item.id] item.name'"> </app-my-component> As there will be more than one input, I would like to avoid usage of TemplateRef. Maybe one of this options can helps you: 1) Using

I've been looking at the Angular 2 APIs for ComponentResolver and DynamicComponentResolver for creating dynamic components, but I have something different in mind than those APIs offer. Is there any way in NG2 to create a component based on a string of its class name? For example, Im building a configurable charts dashboard. Each user's layout is stored in the database, stating they want 2x line charts here, 3x bar charts there, etc. When I load this data as json it looks something like: user.charts = [ { type: 'LineChartComponent', position: ... } { type: 'BarChartComponent', position: ... }

In an Angular app, I have seen that @Component has property moduleId . What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [AppComponent] }); Nishchit Dhanani The beta release of Angular (since vesion 2-alpha.51) supports relative assets for components, like templateUrl and styleUrls in the @Component decorator. module.id works when using CommonJS. You don't need to worry about how it works. Remember :