I’m a bit stuck on the reusing components part.
I have a notification part of a template which is needed in every template. So i asked before how to do this. Someone suggested making it a seperate component. So I’m trying to do this but I’m a bit stuck on how to exchange data between the two components.
News.ts:
export class News {
notification: object = {image: '', title: '', content: ''};
constructor(public navCtrl: NavController, public http: Http, public globalProvider: GlobalProvider, public loadingCtrl: LoadingController, public network: Network) {
/**
* Only do request when online.
*/
if (globalProvider.isOnline()) {
this.sendHTTPRequest();
} else {
this.notification = globalProvider.notification['internet'];
}
I have a provider that has the notification content.
global.ts
import {Injectable} from '@angular/core';
@Injectable()
export class GlobalProvider {
notification: object;
constructor() {
this.notification = {
internal: {
image: 'assets/img/interne-fout.svg',
title: 'Er is een interne fout',
content: 'Probeer het opnieuw, als het probleem aanhoudt neem contact op'
},
internet: {
image: 'assets/img/geen-data.svg',
title: 'Je hebt geen verbinding',
content: 'Check je internetconnectie en probeer het nogmaals'
}
};
}
isOnline() {
return navigator.onLine;
}
}
And i just created these 2:
notification.ts
import { Component } from '@angular/core';
// Providers
import {GlobalProvider} from '../../providers/global';
@Component({
selector: 'notification',
templateUrl: 'notification.html'
})
export class Notification {
notification: object = {image: '', title: '', content: ''};
constructor(public globalProvider: GlobalProvider) {
}
}
notification.html
<div class="notification" *ngIf="notification">
<img [src]="notification?.image">
<span>{{ notification?.title }}</span>
{{ notification?.content }}
</div>
I’m not sure on how I tell the news.ts that the notification data should go to notification.ts/html