How to access a custom html element used in different .ts file from another component?

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:

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.

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
– Terrance00, Commented Aug 25, 2019 at 18:10

Daniel Candia · Accepted Answer · 2019-08-25 20:48:41Z

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.

answered Aug 25, 2019 at 20:48

Daniel Candia

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access a custom html element used in different .ts file from another component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related