Angular 4/5 override class in body tag (Shadow Piercing combinators approach)

In angular component CSS styles are encapsulated into the component's view and don't affect the rest of the application; usually this is the behaviour that you want however sometimes it's useful to be able to affect tags outside the component, for example the body tag

This can be achieved in a few different ways, like for example tweaking view encapsulation parameters

In this post I will show you a CSS approach to this using The Shadow Piercing combinators, starting in Angular 4.3.0 you can use the custom shadow piercing combinator ::ng-deep to achieve this

For example if we had a component named "CustomComponent" we could have a set of files similar to :

• custom.component.ts
• custom.component.css
• custom.component.html

In order for us to shadow and override the main body tag would be to put the following in the custom.component.css :

::ng-deep body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

Angular2 prevent ngboopstrap dialogs to close when clicking outside

The default behaviour for bootstrap modal dialogs is to close when you click outside the dialog however this is not always the desired behaviour

When using Bootstrap 4 without the angular wrapper you need to add the data-backdrop='static' and data-keyboard="false" to the button in order to achieve this :

If you are using the angular wrapper for bootstrap (and assuming you have your project already configured you can achieve this like so :

export class MyComponent implements OnInit {

    constructor(private modalService: NgbModal) {}

     showDialog(): void {
         this.modalService.open(ModalDialog,{size: "lg",backdrop: 'static', keyboard: false});
    }
}

And simply calling the showDialog() method from your template should do the trick