CODEWITHSUNDEEP
angular
Adrian Brand
Adrian Brand

Reputation: 21658

Angular removing template white space

If I have this Bootstrap markup it renders the buttons fine with spaces between them

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <form>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
  </form>
</div>

But if I have the same markup in an Angular template as in this StackBlitz https://stackblitz.com/edit/angular-fqw3g6?file=src/app/app.component.html then the white space is removed and the buttons touch each other.

<link _ngcontent-cyj-c2="" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet"><div _ngcontent-cyj-c2="" class="container-fluid"><form _ngcontent-cyj-c2="" novalidate="" class="ng-untouched ng-pristine ng-valid"><button _ngcontent-cyj-c2="" class="btn btn-primary" type="submit">Submit</button><button _ngcontent-cyj-c2="" class="btn btn-secondary" type="reset">Reset</button></form></div>

Is it possible to get Angular to preserve template white space as it is particularly important in this case.

Upvotes: 1

Views: 3581

Answers (1)

Ludwig
Ludwig

Reputation: 1272

Angular has a white space optimization which is turned on by default. If you want to prevent that you can either set in the @Component preserveWhitespaces: true

@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],
   preserveWhitespaces: true
})
export class AppComponent  {}

or

for the full application in the tsconfig.app.json in the section "compilerOptions" by adding the value preserveWhitespaces: true

If possible use the first option because whitespaces blow your bundles.

Upvotes: 6

Related Questions