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

AtulTalhar123 — Wed, 21 Sep 2022 06:34:34 GMT

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 · GitHub

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-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 { Component, OnInit } 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.

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

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