0

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.

Anandesh Sharma
  • 436
  • 6
  • 22
  • Hey dude. I would urge you to go the direction of a viewchild (but read elementref - which you can make publicly available on the component). Also try not to inject html into the ng-content element - I don't even think it exists at runtime. That is used to 'pass' markup into your component from outside. Rather make your own viewchild to inject into – Terrance00 Aug 25 '19 at 18:10

1 Answers1

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.

Daniel Candia
  • 26
  • 1