I want to override adf-info-drawer-tab component to put automation-id to it. Is it possible ??

cancel
Showing results for 
Search instead for 
Did you mean: 
AtulTalhar123
Member II

I want to override adf-info-drawer-tab component to put automation-id to it. Is it possible ??

Hi All,

I am editing the code and I want to add data-automation-id to the adf component. I searched but no luck.

so I am thinking of overriding it, can you please tell me that it is possible or not ?

If it is possible then how to do that.

I will post my code here.

data-automation-id to add in adf-info-drawer-tab and I have written a code like this

below code has been taken from alfresco-ng2-components/info-drawer.component.html at develop · Alfresco/alfresco-ng2-components · G...

so that I can override it.

custom-drawer.component.html
```
<adf-info-drawer-layout [showHeader]="true">
    <div role="heading" aria-level="1" *ngIf="title" info-drawer-title>{{ title | translate }}</div>
    <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>

    <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>

    <!-- <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container> -->

    <ng-template #tabLayout>
        <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
            <mat-tab *ngFor="let contentBlock of contentBlocks"
                [label]="contentBlock.label | translate"
                class="adf-info-drawer-tab">

                <ng-template mat-tab-label>
                    <mat-icon *ngIf="contentBlock.icon">{{ contentBlock.icon }}</mat-icon>
                    <span *ngIf="contentBlock.label">{{ contentBlock.label | translate }}</span>
                </ng-template>

                <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
            </mat-tab>
        </mat-tab-group>
    </ng-template>

    <ng-template #singleLayout>
        <ng-content select="[info-drawer-content]"></ng-content>
    </ng-template>
</adf-info-drawer-layout>
```
custom-drawer.component.ts
```
import { InfoDrawerTabComponent } from '@alfresco/adf-core';
import { ComponentOnInit } from '@angular/core';
@Component({
  selector: 'aca-custom-drawer',
  templateUrl: './custom-drawer.component.html',
  styleUrls: ['./custom-drawer.component.scss']
})
export class CustomInfoDrawerComponent extends InfoDrawerTabComponent implements OnInit {
  constructor() {
    super();
  }
  ngOnInit(): void {
  }
}
```
and extending the class means all the properties we can use from parent to child component. But that is not happening.
 
main-preview.component.html
```
<adf-info-drawer title="Details">
        <adf-info-drawer-tab [attr.data-automation-id]="'adf-info-drawer-tab-123'" label="Properties">
        </adf-info-drawer-tab>
</adf-info-drawer>
```
Which has been modified as,
```
<adf-info-drawer title="Details">
      <aca-custom-drawer [title]="Properties">
      </aca-custom-info-drawer>
</adf-info-drawer>
```
This way the component I have created is not loading
But this way it is loading
```
<adf-info-drawer title="Details">
</adf-info-drawer>
<aca-custom-drawer [title]="Properties">
</aca-custom-info-drawer>
```
I am not understanding what is the problem. Could you guys please help.
It will be a great help.
Thanks in Advance.