Reusing components?

Ionic Framework ionic-v3
1

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

2

Ow aparently i needed to add

@Input() notification: any[];

in notification.ts

1 Like
3

Can you show how the code ended? Please!

4

Everything stayed the same except for notification.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'notification',
    templateUrl: 'notification.html'
})

export class Notification {
    @Input() notification: any[];
}

Ow and I changed <notification> in news.html to:

    <notification [notification]="notification"></notification>
5

Thanks :slight_smile:

6

There are two things in the OP that I would suggest not emulating:

  • injecting App in service providers
  • passing properties to sendHTTPRequest()
1 Like
7

@rapropos Can you please explain why? I’m still new to Ionic and would love to improve it :). I saw that you could also use ‘this.’ instead of passing the parameters. Is that a better way of doing it?

8

It’s really all about compartmentalization. The more you can clearly define boundaries and areas of control, the more readable, testable, maintainable, and securable your app is. Injecting App is a license to do things in the injecting page that should not belong there. They should be in the app component. As you note, passing parameters to an object method that are available as object properties is confusing. Although I have no knowledge that you are doing this, I have seen posters here pass such things as loading controllers and providers to other providers, and I think that is a design mistake. The less reliant various actors in your design are on one another, the more resilient they are.

1 Like
9

Oww I see, I updated my code. Thanks for the feedback, much appreciated :smiley: