So I have my html that looks like this:
<div>
<div>Lots of stuff that only appears in this component #1</div>
<div>Lots of stuff that only appears in this component #2</div>
<div>Lots of stuff that only appears in this component #3</div>
<div>Lots of stuff that only appears in this component #4</div>
</div>
And currently I am working on the CSS and layout, but this means that I am constantly restructuring the DOM:
<div>
<div>
<div>Lots of stuff that only appears in this component #1</div>
Lots of stuff that only appears in this component #2
<div>Lots of stuff that only appears in this component #3</div>
Lots of stuff that only appears in this component #4
</div>
</div>
Or something like that.
I'v looked at ng-template but that only seems to work with ngIf and ngSwitch.
What I really want is something like this, where I don't have to re-copy all the content every time there is a layout change. BTW, assume I can't create a new component and move it into that new component.
<div>
<div copyFrom="#1"></div>
<div>
<div copyFrom="#2"></div>
<div copyFrom="#3"></div>
</div>
<div copyFrom="#4"></div>
</div>
<div no-display name="#1">Lots of stuff that only appears in this component #1</div>
<div no-display name="#2">Lots of stuff that only appears in this component #2</div>
<div no-display name="#3">Lots of stuff that only appears in this component #3</div>
<div no-display name="#4">Lots of stuff that only appears in this component #4</div>
Is there a way to do this so that I don't have to copy-paste the content, and I can just copy-paste a REFERENCE to the content?
I'm using Angular 7.1.4.
Just because, because I have no idea what you may need to help me, here is the result of ng --version:
Angular CLI: 7.1.4
Node: 11.6.0
OS: darwin x64
Angular: 7.1.4
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/animations 7.2.0
@angular/cdk 7.2.1
@angular/fire 5.0.2
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.2.1
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
Thanks!