Angular Material Ng-Tns Class Changes Margin of Items in My Table, Can Use CSS to Change the Margin But Then Another Variant of Ng-Tns Is Applied

Angular Material ng-tns class changes margin of items in my table, can use CSS to change the margin but then another variant of ng-tns is applied?

You can use the following to select all the current and future elements.

[id*='ng-tns-c'] {

}

How to remove ng-tns class which is adding automatically while using angular 2 animation

From this answer, angular material adds those classes. You may have to edit your tests to filter through the classes.

Margin in angular global styles are not enforced

Try using

   .update_date {
        font-size: small;
        text-align: right;
        margin: 0 !important;
    }

this happens because that style is getting overridden by another

How to remove space bottom mat-form-field

You can add this in your css

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly.
Error and hint get inside the form-field.

Without using ::ng-deep( for Angular 8 )

Turn off encapsulation of your component inside which you change the padding.

You can do this by

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components.
Let's wrap this with with my-form-field class for now

<mat-form-field class="my-form-field">
  <input matInput placeholder="Input">
</mat-form-field>

.my-form-field .mat-form-field-wrapper {
      margin-bottom: -1.25em;
}

You can add these css in global stylesheet without turning off view encapsulation. But the more elegant method is the above one.

Angular: setting ViewEncapsulation.None globally

It is not possible to set ViewEncapsulation globally. Issue 18346 on GitHub suggests to allow setting it at the module level. The status of the issue is Open at the present moment.

Set ViewEncapsulation per module #18346

Current behavior

Currently, we set the view encapsulation at the component level.

@Component({
  selector: 'song-track',
  encapsulation: ViewEncapsulation.Native
})
Meaning that if I want to use native Shadow DOM throughout my app, 
I have to add that bit of configuration to every single component.

Expected behavior

It would be great if I could set it at the module level.

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [
      ...
      { provide: ViewEncapsulationMode, useValue: ViewEncapsulation.Native },
      ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Related Topics