在 angular 7 中从 html 中删除外部组件标记

Question

Similar questions have been asked and usually people suggest a change in the component selector.

In my case, is doesn't work.

Here's the scenario:

I am using Angular Material 's Expansion panel an I want to have a component for each individual item in the panel:

@Component({
  selector: '[app-panel-item]',
  templateUrl: './panel-item.component.html',
  styleUrls: ['./panel-item.component.scss']
})
export class PanelItemComponent

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      desc
    </mat-panel-description>
  </mat-expansion-panel-header>
     BODY
  <mat-action-row>
    <button mat-raised-button>Button</button>
  </mat-action-row>
</mat-expansion-panel>

The issue is that, using either <app-panel-item> or <div app-panel-item> creates an outer html tag that messes up the styling. I tried removing <mat-expansion-panel> from the directive and using <mat-expansion-panel app-panel-item> but you can't have 2 structural selectors together.

Expected layout:

Actual result:

How can I actually remove that outer tag created by the component?

EDIT: Stackblitz

Answer 1

If the problem only is border-radius you can add this style into your styles.css

.mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expanded), .mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
    border-radius: 0;
}

.mat-accordion app-panel-item:first-of-type .mat-expansion-panel {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.mat-accordion app-panel-item:last-of-type .mat-expansion-panel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

here is the example with styles in styles.css

https://stackblitz.com/edit/angular-3xmec5

component.css

::ng-deep .mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expanded),::ng-deep .mat-accordion app-panel-item .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
    border-radius: 0; 
}

::ng-deep .mat-accordion app-panel-item:first-of-type .mat-expansion-panel {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

::ng-deep .mat-accordion app-panel-item:last-of-type .mat-expansion-panel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

stackblitz example with ::ng-deep

https://stackblitz.com/edit/angular-39tbxt