How to give styles to ng-template tag in Angular 4?

Question

 <mat-dialog-content class="no-scroll" >

  <mat-divider></mat-divider>
  <section class="row add-widget-container">
   <span class="col-md-4 text-center">
      <h4>Available widgets</h4>
        <div class="selectable-widgets">
            <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="selectedWidget" (change)="showPreview()" [vertical]="true">
                <mat-button-toggle color="primary" *ngFor="let widget of availableWidgets" 
                    [value]="widget">{{widget.data.title}}</mat-button-toggle>
            </mat-button-toggle-group>
        </div>
   </span>
   <span class="col-md-4">
      <h4 class="text-center">Preview</h4>
    <ng-template #widgetPreview ></ng-template>
  </span>
  <span class="col-md-4 text-center">
      <h4>Options</h4>  

  </span>
  </section>
</mat-dialog-content>

How can we set the height and width of the ng-template tag. I tried putting some inline style to the ng-template tag, but it is not reflecting there

Answer 1

From Angular documentation,

The <ng-template>

The <ng-template> is an Angular element for rendering HTML. It is never displayed directly. In fact, before rendering the view, Angular replaces the <ng-template> and its contents with a comment.

If there is no structural directive and you merely wrap some elements in a <ng-template>, those elements disappear. That's the fate of the elements inside your <ng-template>.

Answer 2

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. As a result you cant set styles to that .