How to Pass data from Parent to Child and Child to Parent

Question

I am beginner for Angular an in my DashBoard screen I have a SideMenu with multiple Tabs.

When I select respective Tab then Navigation bar Title has to change.

I found 3 ways for communications between components

1)Sharing Data via @Input
2)Sharing Data via @ViewChild
3)Sharing Data via @Output() and EventEmitter

I tried the second way for doing my requirement but I am getting an exception TypeError: Unable to get property 'title' of undefined or null reference TypeError: Unable to get property 'title' of undefined or null reference

Can some one help me please?

app.component.ts:

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Home.ts:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Nav) nav: Nav;
  // make UsersPage the root (or first) page
  rootPage: any = DashboardTabsPage;
  pages: Array<{ title: string, icon: string, component: any, openTab? : any }>;

  constructor() {
    // set our app's pages
    this.pages = [
      { title: 'DashBoard',icon: 'home', component: DashboardTabsPage},
      { title: 'List', icon: 'home',component: ListsTabsPage },
      { title: 'NoTabs', icon: 'home',component: NoTabsPage },
    ];
  }

  openPage(page) {
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component,{ openTab: page.openTab });
  }

}

dashboard.html:

<ion-header>

  <ion-navbar>
    <button menuToggle left>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<!-- <h1>Dashboard showing</h1> -->
<ion-tabs #myTabs>
    <ion-tab tabIcon="settings" tabTitle="Settings" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="person" tabTitle="Profile" [root]="tab2"></ion-tab>
</ion-tabs>`
</ion-content>

Dashboard:

export class DashboardTabsPage implements AfterViewInit {

  @ViewChild('myTabs') tabRef: Tabs;
  @ViewChild(SettingsPage) settingPage;
  tab1 = SettingsPage;
  tab2 = ProfilePage;
  title:string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ngAfterViewInit() {
    this.title = this.settingPage.title;
  }
}

Settings:-

@IonicPage()
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
    export class SettingsPage {
      title:string;
      constructor() {
      }
      ionViewDidLoad() {
        this.title="Setting Screen";
        console.log('ionViewDidLoad SettingsPage');
      }
    }