Example with Stencil.js v0.16.x .
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 inthrough a @Prop!</p><button onClick={this.signIn}>Sign In</button><button onClick={this.signOut}>Sign Out</button></div>);}}
Resources :
Real world example application built with Stencil.js :