import { Component } from '@stencil/core';
​
export interface User {
  name: string;
}
​
@Component({
  tag: 'app-root'
})
export class AppRoot {
  
  postService: PostService;
  
  @State() user: User;
​
  constructor(){
    this.postService = new PostService();  
  }
  
  signOut = () => {
      this.user = null;
    }
    
  signIn = () => {
      this.user = { name: "Pablo" }
    }
    
  render() {
    return (
      <div>
        <header>
          <h1>Stencil App Starter</h1>
        </header>
​
        { this.user && <span> Your are connected {this.user.name}. </span> }
        <main>
          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
              <stencil-route url='/profile' component='app-profile' componentsProps={{user: this.user, signIn : this.signIn, signOut : this.signout }}/>
            </stencil-route-switch>
          </stencil-router>
        </main>
      </div>
    );
  }
}
​

​
import { Component, Prop } from '@stencil/core';
​
@Component({
  tag: 'app-profile'
})
export class AppProfile {
  @Prop() user: User;
  @Prop() signIn: Function;
  @Prop() signOut: Function;
​
  render() {
      return (
        <div class="app-profile">
          <p>
            Hello! My name is {this.user && this.user.name}. My name was passed in
            through a @Prop!
          </p>
          
          <button onClick={this.signIn}>Sign In</button>
          <button onClick={this.signOut}>Sign Out</button>
        </div>
      );
  }
}