Создаем шаблонизируемые переиспользуемые компоненты в Angular 2

class Widget extends React.Component {
    state = {}

    render() {
        const {settingsMode} = this.state;
        const {settings, children} = this.props;

        return (
            <div className="widget">
                <div className="widget--header">
                    <button onClick={this.onButtonClick}>
                        {settingsMode ? 'OK' : 'Settings'}
                    </button>
                </div>
                <div className="widget--body">
                    {settingsMode && (
                        <div>
                            Settings: {settings}
                        </div>
                    )}
                    {!settingsMode && children}
                </div>
            </div>
        );
    }

    onButtonClick = () => {
        this.setState({
            settingsMode: !this.state.settingsMode
        });
    }
}

class ListNavigator extends React.Component {
    state = {}

    render() {
        const {items, Item} = this.props;

        return (
            <div className="navigator">
                {items.map((item, i) => <Item key={i} {...item}/>)}
            </div>
        );
    }
}

//can be a class with its own state and access to context
const SeparateItem = ({id, name}) => (
    <div>
        Separate: {id}: {name}
    </div>
);

const items = [
    {
        id: 123,
        name: 'Foo',
    },
    {
        id: 234,
        name: 'Bar'
    }
];

class App extends React.Component {
    render() {
        const settings = (
            <div>settings</div>
        );

        return (
            <div>
                <Widget settings={settings}>
                    <div>
                        Large widget body
                    </div>
                </Widget>
                As separate component
                <ListNavigator items={items} Item={SeparateItem}/>
                As a method
                <ListNavigator items={items} Item={this.renderItem}/>
            </div>
        );
    }

    renderItem = item => {
        return (
            <div>
                <span>{item.id}</span>
                <span>{item.name}</span>
            </div>
        );
    }
}