What is the implementation in Ionic 2 to avoid code repetition?

Question

I have a "tab" and would like to put it in the header, however I would like this "tab" and its elements to be the same for all screens, as well as some .scss. design What is the best way to do this kind of implementation?

Answer 1

You can do this by creating components in Ionic2.

Example 1: https://www.joshmorony.com/how-to-create-a-custom-loading-component-in-ionic-2/

Example 2: I made a progress bar component. To make it I had to create a new component:

ionic g component progress-bar

Edit the files as needed:

components/progress-bar/progress-bar.ts

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

@Component({
    selector: 'progress-bar',
    templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
    @Input('progress')
    progress: number;

    constructor() { }

}

components/progress-bar/progress-bar.html

<div class="progress-outer">
    <div class="progress-inner" [style.width]="progress + '%'">
        {{progress}}%
    </div>
</div>

components/progress-bar/progress-bar.scss

progress-bar {
    .progress-outer {
        width: 96%;
        margin: 10px 2%;
        padding: 3px;
        text-align: center;
        background-color: #f4f4f4;
        border: 1px solid #dcdcdc;
        color: #fff;
        border-radius: 20px;
    }

    .progress-inner {
        min-width: 15%;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        border-radius: 20px;
        background-color: #COR PRIMARIA DO SEU APP
    }
}

Then declare it globally:

app/app.module.ts

import { ProgressBarComponent } from '../components/progress-bar/progress-bar'

@NgModule({
    declarations: [
...
        ProgressBarComponent
    ],
...
    entryComponents: [
...
        ProgressBarComponent
    ],
...
})

Now just use where you’d like to apply:

pages/exemplo/exemplo.html

...
<ion-content padding>
    <progress-bar [progress]="progressoUpload" *ngIf="iniciadoUpload"></progress-bar>
...

To receive and send parameters between the components there are two important decorators @Input and @Output. Unfortunately I won’t be able to LINK the documentation for their use. But in my example there is @Input