There is a module that displays your template. I want to embed html from a component into this template.

Module:

import * as angular from 'angular'; import uiRouter, { StateProvider } from '@uirouter/angularjs'; import { CATALOG } from 'common/constants-common/states'; import catalogPageViewComponent from './catalog.component'; import './catalog.less'; export default angular .module('CatalogPageView', [ uiRouter ]) .component('catalogPageViewComponent', catalogPageViewComponent) .config(($stateProvider: StateProvider) => { $stateProvider.state(CATALOG, { data: { state: CATALOG }, url: '/catalog', template: '<div ui-view></div>' }); }) .name;

Component that I want to display:

 class CatalogController { test = {name: 'Catalog test'}; } const catalogPageViewComponent = { controller: CatalogController, template: `<div class="container">{{ $ctrl.test.name }}</div>` } export default catalogPageViewComponent;

In the 'ui-view' module - is displayed, everything is ok. It is not possible to display what is in the component: 'template: <div class="container">{{ $ctrl.test.name }}</div> '

    1 answer 1

    Understood himself. Not correctly passed the component to the module.

    I connect components in the module: .component('catalog', catalogPageViewComponent)

    In the module template I specify:

      template: '<catalog></catalog>'