add icon to right most corner of PrimeNg TabView Header

Issue

I need to place an icon on the right most corner of a PrimeNG TabView

i looking for something like this

for demonstration purposes i opened the stackblitz in the docs and hardcoded the css but it will not be resposive when screen size changes

    <p-tabView>
        <p-tabPanel header="Header I">
            <p>
                Lorem ipsum
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header II">
            <p>
                Sed ut perspiciatis
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header III">
            <p>
                At vero eos et
            </p>
        </p-tabPanel>
        <i class="pi pi-sort-alt icon-position"></i>
    </p-tabView>

.icon-position {
  position: absolute;
  left: 30rem;
  top: 3rem;
}

Solution

1 - Inject renderer2 in your constructor.

constructor(private _renderer2:Renderer2){}

2 - Add template reference on p-tabView like #tabView and read with @ViewChild

<p-tabView #tabView>

@ViewChild('tabView') tabView:TabView;

3 - Implments AfterViewInIt

4 - Create function which create icon using renderer and listen to the click event of the icon:

  createSortIcon(){
    const icon = this._renderer2.createElement('i');
    this._renderer2.addClass(icon,'pi')
    this._renderer2.addClass(icon,'pi-sort-alt');
    this._renderer2.setStyle(icon,'position','absolute');
    this._renderer2.setStyle(icon,'cursor','pointer');
    this._renderer2.setStyle(icon,'right','0')
    const nav_header = (this.tabView.content.nativeElement as HTMLElement).firstChild;
    this._renderer2.appendChild(nav_header,icon);
    this._renderer2.listen(icon,'click',() =>{
      this.myFunc() // put here your function
    })
  }

5- Call createSortIcon() inside the ngAfterViewInIt()

Answered By - Mouayad_Al