Buttons Navigation


I am trying to build a custom tab view using buttons. So clicking on each button will display different output on the rest of the page. So something like that:

I would really appreciate any kind of help.


Did the standard TabView not meet your needs?


It did for Android, but I could not stick the TabView on the top for iOS(Just like the design you see). So I decided to make my own custom one.


looks like this forum topic is a duplicate of one you started earlier: iOS tabView on the top

Did that solution not work for you? Note, on iOS the design pattern is to have tabs at the bottom.


Oh ya, I know that the iOS user interface guidelines emphasize on having the Tabs at the bottom.
The solution that was provided in my previous question was the opposite way. I tried to revert that, but it did not work out.


Hey @MajdSoufan, My idea is try with Ng Directives with scope variables.


<FlexboxLayout columns="*,*,*" rows="*">
    <Button row="0" col="0" class="btn btn-primary btn-active" text="Sitechecker" (tap)="onSitechecker()"></Button>
    <Button row="0" col="1" class="btn btn-primary btn-active" text="Features" (tap)="onFeatures()"></Button>
    <Button row="0" col="2" class="btn btn-primary btn-active" text="Releasenotes" (tap)="onReleasenotes()"></Button>

<GridLayout [ngSwitch]="category" class="p-15 m-t-15">
    <GridLayout *ngSwitchCase="'sitechecker'" backgroundColor="#8C489F">
    <GridLayout *ngSwitchCase="'features'" backgroundColor="#0077AF">
    <GridLayout *ngSwitchCase="'releasenotes'" backgroundColor="#FFFF66">


import { Component } from "@angular/core";

    moduleId: module.id,
    templateUrl: "./ngswitch-directive.component.html",
export class NgSwitchComponent {
    public category: string;

    onSitechecker() {
        this.category= "sitechecker";

    onFeatures() {
        this.category= "features";

    onReleasenotes() {
        this.category= "releasenotes";