如何从另一个组件访问不同.ts文件中使用的自定义html元素？

Question

I want to access and manipulate a custom html element which is declared in another .ts file of my project from a component.

/src/app/@theme/layouts/one-column/one-column-layout.ts this is the file where the custom html element is used.

/src/app/pages/dashboard/dashboard.component.ts this is from where I want to access that custom element and append some innerHTML in it.

I've almost checked everything but didn't get any satisfactory answer; what I've already checked:

1. How to access method from .ts file into html file in angular2?

2. How to access one component's state from another component

3. How to append HTML element from ts file

4. AngularJS 2 how to access DOM element within TS file?

5. Angular access html content via .ts file

In one-column-layout.ts I want to append HTML in <ng-content></ng-content>

@Component({
  selector: 'ngx-one-column-layout',
  styleUrls: ['./one-column.layout.scss'],
  template: `
      <nb-sidebar responsive right>
        <nb-tabset>
          <nb-tab tabIcon="person-outline" tabTitle="Customers">
            <ng-content tag="right-sidebar"></ng-content>
          </nb-tab>
        </nb-tabset>
      </nb-sidebar>
  `,
})

I expect to append my html to this custom element, I know this is a rookie question though.

Answer 1

If you wanna access one component from another, first of all, you should separate the template from the .ts file. Then you can use @ViewChild and send it to the other component with @Input / @Output depending the direction.