angular-elements-lit-html-cards.md

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder

• Create card.ts file in src/app folder

• Add Component

  import { Component, ViewEncapsulation, Input } from '@angular/core'
  
  export class UserProfile {
    name: string;
    profession: string;
    motto: string;
    photo: string;
  }
  
  @Component({
    selector: 'card',
    templateUrl: './card.html',
    styleUrls: [ './card.css' ],
    encapsulation: ViewEncapsulation.ShadowDom
  })
  export class CardComponent { 
  
    @Input('profile') profile: UserProfile;
  
  }

• Create card.html file in src/app folder

  <div class="card-container">
    <div class="card">
      <div class="front">
        <div class="cover"></div>
        <div class="user">
          <img class="img-circle" alt="" [src]="profile.photo" />
        </div>
        <div class="content">
          <div class="main">
            <h3 class="name">{{ profile.name }}</h3>
            <p class="profession">{{ profile.profession }}</p>
            <p class="text-center">{{ profile.motto }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

• Create card.css file in src/app folder

  .card-container {
    perspective: 800px;
    margin-bottom: 30px;
  }
  
  .card {
    transition: transform 0.5s;
    transform-style: preserve-3d;
    position: relative;
  }
  
  .front {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
  }
  
  .front {
    z-index: 2;
  }
  
  .card {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 4px;
    color: #444444;
  }
  .card-container,
  .front {
    width: 100%;
    height: 370px;
    border-radius: 4px;
  }
  .card .cover {
    height: 90px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #dd0031;
  }
  .card .cover img {
    width: 100%;
    display: none;
  }
  .card .user {
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 120px;
  }
  .card .user img {
    background: none repeat scroll 0 0 #ffffff;
    border: 4px solid #ffffff;
    width: 100%;
  }
  
  .card .content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
  }
  .card .content .main {
    min-height: 160px;
  }
  .card .back .content .main {
    height: 215px;
  }
  .card .name {
    font-size: 20px;
    line-height: 28px;
    margin: 10px 0 0;
    text-align: center;
    text-transform: capitalize;
    font-weight: lighter;
  }
  
  .card .profession {
    color: #999999;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .card .motto {
    border-bottom: 1px solid #eeeeee;
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
    text-align: center;
  }

• Add @angular/elements

  ng add @angular/elements
  

• Create card.module.ts

  import { NgModule, Injector } from '@angular/core'
  import { BrowserModule } from '@angular/platform-browser'
  
  import { createCustomElement } from '@angular/elements';
  import { CardComponent } from './card/card';
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ CardComponent ],
    entryComponents: [  CardComponent ]
  })
  export class CardModule {
  
    constructor(injector: Injector) { 
      const CardElement = createCustomElement(CardComponent, { injector })
      customElements.define('ar-card', CardElement)
      
    }
  
    ngDoBootstrap() { }
  
  }

• update your main.ts

  import { enableProdMode } from '@angular/core';
  import { platformBrowser } from '@angular/platform-browser'
  
  import { CardModule } from './app/card/card.module'
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowser().bootstrapModule(CardModule)

• Add ngx-build-plus for dependency

  ng add ngx-build-plus@latest
  

• Build card elements

  ng build --prod --single-bundle
  

Update your dist/index.html

• Add this to your dist/index.html

  <script type="module">
      import { render, html } from 'https://unpkg.com/lit-html@1.1.0/lit-html.js'
  
      const  profiles = [
        {
          name: "Jane Doe",
          profession: "Framework Developer",
          motto: "I never wanted to be famous, I wanted to be great.",
          photo: 'https://pymwoqn637.codesandbox.io/default.png'
        },
        {
          name: "Kurtis Weissnat",
          profession: "Developer",
          motto: "When in doubt, iterate faster!",
          photo: 'https://pymwoqn637.codesandbox.io/default.png'
        }
      ]
  
      const cards = html `
        ${profiles.map(profile => {
            return html `<ar-card .profile="${profile}"></ar-card>`
          })
        }
      `
      
      render(cards, document.getElementById('card'))
  </script>

• Add css grids to your cards

  <style>
    .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: auto;
      grid-gap: 1rem; 
    }
  </style>

• Update your div container (add class)

  <div id="card" class="cards"></div>