Reusable Components

ng g m shared

ng g c shared/divider

<h2>Custome headline</h2>
<hr class="pt-2 pb-2">

@NgModule({
  declarations: [
    DividerComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    DividerComponent
  ]
})

@NgModule({
  declarations: [
    ElementsHomeComponent,
    PlaceholderComponent
  ],
  imports: [
    CommonModule,
    ElementsRoutingModule,
    SharedModule
  ],
  exports: []
})

<app-divider></app-divider>
<app-placeholder [showImage]="true" [placeholderW]="'400px'"></app-placeholder>

<h2>
  <ng-content></ng-content>
</h2>
<hr class="pt-2 pb-2">

<app-divider>
  Placeholder Component
</app-divider>
<app-placeholder [showImage]="true" [placeholderW]="'400px'"></app-placeholder>

<div class="row g-0 bg-body-secondary position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="https://via.placeholder.com/350x150" class="w-100">
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Another instance of placeholder content for this other custom component. 
    It is intended to mimic what some real-world content would look like, 
    and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

<app-divider>
  Placeholder Component
</app-divider>
<app-placeholder [showImage]="true" [placeholderW]="'400px'"></app-placeholder>

<div class="mt-3"></div>

<app-divider>
  Streched Link Component
</app-divider>
<app-streched-link></app-streched-link>

<div class="row g-0 bg-body-secondary position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <ng-content select="img"></ng-content>
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Another instance of placeholder content for this other custom component. 
    It is intended to mimic what some real-world content would look like, 
    and we're using it here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

<app-divider>
  Streched Link Component
</app-divider>
<app-streched-link>
  <img src="https://via.placeholder.com/350x150" class="w-100">
</app-streched-link>

<div class="row g-0 bg-body-secondary border rounded position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <ng-content select="img"></ng-content>
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <ng-content select="h5"></ng-content>
    <p><ng-content></ng-content></p>
    <ng-content select="a"></ng-content>
  </div>
</div>

<app-divider>
  Streched Link Component
</app-divider>
<app-streched-link>
  <img src="https://via.placeholder.com/350x150" class="w-100">
  <h5 class="mt-0">Columns with stretched link</h5>

  Another instance of placeholder content for this other custom component.
    It is intended to mimic what some real-world content would look like,
    and we're using it here to give the component a bit of body and size.

  <a href="#" class="stretched-link">Go somewhere</a>
</app-streched-link>

<div class="row g-0 bg-body-secondary border rounded position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <ng-content select="[link-img]"></ng-content>
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <ng-content select=".link-header"></ng-content>
    <p><ng-content></ng-content></p>
    <ng-content select="a"></ng-content>
  </div>
</div>

<app-divider>
  Streched Link Component
</app-divider>
<app-streched-link>
  <img link-img src="https://via.placeholder.com/350x150" class="w-100">
  <h5 class="mt-0 link-header">Columns with stretched link</h5>

  Another instance of placeholder content for this other custom component.
    It is intended to mimic what some real-world content would look like,
    and we're using it here to give the component a bit of body and size.

  <a href="#" class="stretched-link">Go somewhere</a>
</app-streched-link>

div.img-content:empty{
  display: none;
}