How to create object which can be modified by multiple angular2 component.
Eg.
PeopleService.ts
//a simple service
import {Injectable} from 'angular2/angular2'
#Injectable()
export class PeopleService {
constructor() {
this.people = [
{id: 1, name: 'Brad'},
{id: 2, name: 'Jules'},
{id: 3, name: 'Jeff'}
];
}
changeBrad(){
this.people[0].name = "Brad_Changed";
}
}
App.ts
import {Component, View} from 'angular2/angular2';
import {PeopleService} from './peopleService';
#Component({
selector: 'my-app',
bindings: [PeopleService]
})
#View({
template: '{{appval}}',
})
export class App{
appval:string;
constructor(public peopleService:PeopleService){
peopleService.changeBrad();
this.appval = peopleService.people[0].name; // result : Brad_Changed
}
}
Home.ts
import {Component, View} from 'angular2/angular2';
import {PeopleService} from './peopleService';
#Component({
selector: 'my-home',
bindings: [PeopleService]
})
#View({
template: '{{homeval}}',
})
export class Home{
homeval:string;
constructor(public peopleService:PeopleService){
this.homeval = peopleService.people[0].name; // result : Brad
}
}
In Home.ts result is " Brad" which is not modified by App.ts I want result to be "Brad_Changed" which was modified by App.ts. How do I write my PeopleService.ts and how to pass it by reference to other component in angular2?
Just remove PeopleService from Home component bindings. By adding this binding, you're creating new instance of PeopleService for Home component and all its children:
import {Component, View, Host} from 'angular2/angular2';
import {PeopleService} from './peopleService';
#Component({
selector: 'home',
// Adding this you're creating new instance of PeopleService for
// Home component and all its children
// bindings: [PeopleService]
})
#View({
template: '<p>{{homeval}}</p>',
})
export class Home{
homeval:string;
constructor(peopleService:PeopleService){
this.homeval = peopleService.people[0].name; // result : Brad
}
}
See this plunker
Related
My project structure:
app.component.ts:
import { Component } from "#angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css'],
providers: [TodoService]
})
export class AppComponent {
title:string = "Angular 2Do";
}
todo-form.component.ts:
import {Component, Output, EventEmitter} from "#angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"
#Component({
moduleId: module.id,
selector: "todo-form",
templateUrl: "todo-form.component.html",
styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
...
constructor(private todoService:TodoService) {
console.log(this.todoService);
this.todoService.order = 2;
console.log( this.todoService);
}
}
todo-list.component.ts:
import {Component, Input, OnInit} from "#angular/core"
import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"
#Component({
moduleId: module.id,
selector: "todo-list",
templateUrl: "todo-list.component.html",
styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
todos:ITodo[];
...
constructor(private todoService:TodoService) {
...
console.log(this.todoService);
this.todoService.order=1;
console.log(this.todoService);
}
...
}
app is the parent of the list and form components
Whaen I start application I see in console:
but if expand all I see:
Which result actual and why in second view I see 1 and in another 2.
The console.log '+' button can only show you the current state of the object, not the object at the snapshot in time of when it was called.
See console.log() async or sync? for a more in depth explanation.
So order: 1, is the final state of the object.
never use providers( providers: [TodoService] ) in component
as
import { Component } from "#angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css']
})
export class AppComponent {
title:string = "Angular 2Do";
}
it makes new instance when component initialise so put providers in module only ie. NgModule
I have an AlertComponent that I would like to use as a directive in my AppComponent and expose it so that it's available (as a sort of singleton) to all the routes/children components from AppComponent. But I can't seem to find a way to get the instance of the AlertComponent object used as a directive in order to call it's methods and see the changes made on the directive (i.e. add/remove alerts to/from the page).
Here is AlertComponent:
import { Component } from 'angular2/core';
import { Alert } from './model';
#Component({
selector: 'alerts',
templateUrl: './alert/index.html'
})
export class AlertComponent {
alerts: Array<Alert>;
constructor() {}
add(alert: Alert) {
this.alerts.push(alert);
}
remove(index: number) {
this.alerts.splice(index, 1);
}
clear() {
this.alerts = [];
}
}
export { Alert };
And AppComponent:
import { Component, OnInit, provide } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { HTTP_PROVIDERS, RequestOptions } from 'angular2/http';
import { CookieService } from 'angular2-cookie/core';
import { UserComponent } from '../user/component';
import { AlertComponent, Alert } from '../alert/component';
import { ExtendedRequestOptions } from '../extended/RequestOptions';
import { UtilObservable } from '../util/observable';
#Component({
selector: 'app',
template: `
<alerts></alerts>
<router-outlet></router-outlet>
`,
//styleUrls: [ 'app/style.css' ],
directives: [
ROUTER_DIRECTIVES,
AlertComponent
],
providers: [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: ExtendedRequestOptions }),
CookieService,
UtilObservable,
AlertComponent
]
})
#RouteConfig([{
path: '/user/:action',
name: 'User',
component: UserComponent,
useAsDefault: true
}
])
export class AppComponent implements OnInit {
constructor(public _alert: AlertComponent) {}
ngOnInit() {
this._alert.add(new Alert('success', 'Success!'));
}
}
I'd like to have the same instance of AlertComponent available to all descendant routes/children of AppComponent (e.g. UserComponent), so as to add alerts to the same directive.
Is this possible? Or is there another, more proper way to do this?
[Update]
The chosen solution answers the title question, but I also wanted to have a simple solution to share alerts among my components. Here's how to do that:
AlertComponent:
import { Component } from 'angular2/core';
import { Alert } from './model';
export class Alerts extends Array<Alert> {}
#Component({
selector: 'alerts',
templateUrl: './alert/index.html'
})
export class AlertComponent {
constructor(public alerts: Alerts) {}
add(alert: Alert) {
this.alerts.push(alert);
}
remove(index: number) {
this.alerts.splice(index, 1);
}
clear() {
this.alerts.length = 0;
}
}
export { Alert };
AppComponent:
import { Component, provide } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { HTTP_PROVIDERS, RequestOptions } from 'angular2/http';
import { AlertComponent, Alerts } from '../alert/component'
import { UserComponent } from '../user/component';
import { ExtendedRequestOptions } from '../helpers/extensions';
#Component({
selector: 'app',
template: `<router-outlet></router-outlet>`,
directives: [
ROUTER_DIRECTIVES
],
viewProviders: [
provide(Alerts, { useValue: [] })
],
providers: [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: ExtendedRequestOptions })
]
})
#RouteConfig([{
path: '/user/:action',
name: 'User',
component: UserComponent,
useAsDefault: true
}
])
export class AppComponent {}
Basically, I'm providing a singleton array of alerts that's used by every AlertComponent.
You can move the provide() to providers (instead of viewProviders) if you want to use it outside of directives, but if not, keep it simple and restrict it this way.
Hope this helps someone :)
You need to use ViewChild decorator to reference it:
#Component({
})
export class AppComponent implements OnInit {
#ViewChild(AlertComponent)
_alert: AlertComponent;
ngAfterViewInit() {
// Use _alert
this._alert.add(new Alert('success', 'Success!'));
}
}
#ViewChild is set before the ngAfterViewInit hook method is called.
expose it so that it's available (as a sort of singleton) to all the
routes/children components from AppComponent.
Or is there another, more proper way to do this?
Create and bootstrap a service for AlertComponent, like this
AlertService
import {Injectable} from '#angular/core';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/share';
#Injectable()
export class AlertService {
private _alerts: Array<Alert> = [];
public alertsChange: Subject<Array<Alert>> = new Subject();
public get alerts(): Array<Alert> {
return this._alerts;
}
add(alert: Alert) {
this._alerts.push(alert);
this.alertsChange.next(this._alerts);
}
remove(index: number) {
this._alerts.splice(index, 1);
this.alertsChange.next(this._alerts);
}
clear() {
this._alerts = [];
this.alertsChange.next(this._alerts);
}
}
Bootstrap AlertService
import {bootstrap} from '#angular/platform-browser-dynamic';
import {YourApp} from 'path/to/YourApp-Component';
import { AlertService} from 'path/to/alert-service';
bootstrap(YourApp, [AlertService]);
AlertComponent
import { Component } from 'angular2/core';
import { Alert } from './model';
import { AlertService} from 'path/to/alert-service';
#Component({
selector: 'alerts',
templateUrl: './alert/index.html'
})
export class AlertComponent {
alerts: Array<Alert>;
constructor(alertService: AlertService) {
alertService.alertsChange.subscribe((moreAlerts: Array<Alert>) => {
this.alerts = moreAlerts;
})
}
}
All the routes/children components
(sample):
import { Component} from '#angular/core';
import { AlertService} from 'path/to/alert-service';
#Component({
template: `.....`
})
export class SampleComponent {
constructor(public alerts: AlertService){}
ngOnInit(){
this.alerts.add(new Alert('success', 'Success!'));
}
ngOnDestroy(){
this.alerts.clear();
}
}
To see other alike examples see this question
I am trying to pass a simple string object from a parent component to a sub-child component. I have tried doing it the following way:
parent.ts
import {Component} from 'angular2/core';
import {Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteConfig} from 'angular2/router';
import {ChildCmp} from "./child";
import {bootstrap} from 'angular2/platform/browser';
#Component({
selector: 'app',
template:`
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class ParentCmp{
public data = "Some data from parent.";
constructor (private _router:Router){
var config = [];
if(!this._router.registry.hasRoute("Child",ParentCmp))
config.push({path: "/child/...",component:ChildCmp,name: 'Child',useAsDefault:true, data: {"data": this.data}});
this._router.config(config);
}
}
bootstrap(ParentCmp,[
ROUTER_PROVIDERS
]);
child.ts
import {Component} from 'angular2/core';
import {RouteData,Router,ROUTER_DIRECTIVES,RouteConfig} from 'angular2/router';
import {SubChildCmp} from "./sub_child";
#Component({
selector: 'child',
template: `<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
#RouteConfig([
])
export class ChildCmp{
public data:Object;
constructor(private _data:RouteData,private _router:Router){
this.data = this._data.get("data");
var config = [];
if(!this._router.registry.hasRoute("SubChild",ChildCmp))
config.push({path:"/sub_child",component: SubChildCmp,name:"SubChild", useAsDefault:true, data:{"data":this.data}});
this._router.config(config);
}
}
sub_child.ts
import {Component} from 'angular2/core';
import {RouteData} from 'angular2/router';
#Component({
selector: "sub-child",
template: `Data from parent is -->
{{data}}
`
})
export class SubChildCmp{
public data:Object;
constructor(private _data:RouteData){
this.data = this._data.get("data");
}
}
But I am getting a blank page. It looks like the routing configuration in child.ts is not being configured properly. How can I achieve this? I just want to pass some data from parent component to sub-child component. I re-produced the problem here on plunker
Usually a service is used for this use case
#Injectable
export class SharedData {
data;
}
#Component({
selector: 'app',
providers: [SharedData],
template:`
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
export class ParentCmp{
public data = "Some data from parent.";
constructor (private _router:Router, private _sharedData:SharedData){
var config = [];
if(!this._router.registry.hasRoute("Child",ParentCmp))
_sharedData.data = this.data;
}
}
}
export class SubChildCmp{
public data:Object;
constructor(_sharedData:SharedData){
this.data = _sharedData.data;
}
}
Using Observable or BehaviorSubject with subscribe() might be necessary if there are timing issues, for example when SubChildCmp reads the value before the ParentCmp has set it.
For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
Creating a basic directive is simple:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: '<div>Hello!</div>'
})
export class MyComponent {
constructor() {
}
}
This works as expected. However, if I want to use Ionic components in my directive things blow up.
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
constructor() {
}
}
The directive is rendered, but Ionic components are not transformed, and so wont look/work properly.
I can't find any examples on this. How should I do this?
Found the answer here:
You have to import the Ionic components and register them as
'directives'
So my second example becomes:
import {Component} from 'angular2/core';
import {List, Item} from 'ionic/ionic';
#Component({
selector: 'my-component',
directives: [List, Item],
template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
constructor() {
}
}
I've tried:
import {Component, Template, bootstrap} from 'angular2/angular2';
import {Immutable} from 'immutable/immutable';
#Component({
selector: 'my-app'
})
#Template({
inline: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent {
constructor() {
this.name = 'Alice';
this.wishes = Immutable.List(['a dog', 'a balloon', 'and so much more']);
console.log(this.wishes);
}
}
bootstrap(MyAppComponent);
But then Immutable ends up being undefined.
Then I tried:
import {Component, Template, bootstrap} from 'angular2/angular2';
import {Immutable} from 'immutable/immutable';
#Component({
selector: 'my-app'
})
#Template({
inline: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent {
constructor(im: Immutable) {
this.name = 'Alice';
this.wishes = im.List(['a dog', 'a balloon', 'and so much more']);
console.log(this.wishes);
}
}
But then I get Cannot resolve all parameters for MyAppComponent. Can anybody help me with this?
And yes I've added the immutable folder to System.paths. Could it be that Immutable just can't be imported in an ES6 kind of way?
It was a small mistake. I had to change
import {Immutable} from 'immutable/immutable';
to
import Immutable from 'immutable/immutable';