Angular ::ng-deep only for child component

user_7279498 0
Viewed 840

I would like to give margin-left to "mat-autocomplete-panel"

I'm using this select-box component in four different component. I would like to change .mat-autocomplete-panel margin only for one of them, and i don't want to effect others.

Example of mat-autocomplete-panel

So my question is basicly:

When i used following code all child components are affected but i would like to give margin left only one of them

::ng-deep .mat-autocomplete-panel {
  margin-left: -1200px;
}

I've tried following code as well but it didn't work.

:host ::ng-deep .mat-autocomplete-panel {
  margin-left: -1200px;
}

I've used cli ng g c to creating all components and they're using .scss file i've changed them to .css but it didn't work as well.

angular7 angular-material css
1 Answers

You can wrap your autocomplete panel in some div, e.g. 

<div class="autocomplete-wrapper">
   <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
 </div>

end then use this style:

:host .autocomplete-wrapper ::ng-deep .mat-autocomplete-panel  {
  margin-left: -1200px;
}
user_120148660
Related