feat(examples): add elements example

- minor styling fixes

package.json

@@ -35,6 +35,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-extensions/elements": "^8.4.1",
     "@angular-extensions/model": "^8.0.0",
     "@angular/animations": "~8.0.0",
     "@angular/cdk": "~8.0.0",

projects/angular-ngrx-material-starter/src/app/features/examples/authenticated/authenticated.component.scss

@@ -0,0 +1,4 @@
+.main-heading {
+  text-transform: uppercase;
+  margin: 0 0 20px 0;
+}

projects/angular-ngrx-material-starter/src/app/features/examples/elements/elements.component.html

@@ -0,0 +1,54 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h1 class="main-heading">
+        {{ 'anms.examples.elements.title' | translate }}
+      </h1>
+    </div>
+  </div>
+  <div class="row" [ngClass]="routeAnimationsElements" rtl>
+    <div class="col-md-12 col-lg-6">
+      <ng-template #loading>Loading...</ng-template>
+      <mwc-button raised *axLazyElement="'https://unpkg.com/@material/[email protected]/mwc-button.js?module'; loadingTemplate: loading; module: true"
+                  (click)="increment()">
+        Increment
+      </mwc-button>
+      <br>
+      <br>
+      <p>{{ 'anms.examples.elements.counter' | translate }}: {{counter}}</p>
+    </div>
+    <div class="col-md-12 col-lg-6" [ngClass]="routeAnimationsElements">
+      <p>
+        {{ 'anms.examples.elements.text1' | translate }}
+        <code>https://unpkg.com/@material/[email protected]/mwc-button.js?module</code>
+        {{ 'anms.examples.elements.text2' | translate }}
+      </p>
+      <p>
+        {{ 'anms.examples.elements.text3' | translate }}
+        <code>*axLazyElement</code>
+        {{ 'anms.examples.elements.text4' | translate }}
+        <code>@angular-extensions/elements</code>
+        {{ 'anms.examples.elements.text5' | translate }}.
+      </p>
+      <p>
+        {{ 'anms.examples.elements.text6' | translate }}
+        <a href="https://github.com/angular-extensions/elements" target="_blank">{{
+          'anms.examples.elements.text5' | translate
+          }}</a>,
+        <a href="https://angular-extensions.github.io/elements/#/docs/use-cases" target="_blank">{{
+          'anms.examples.elements.text7' | translate
+          }}</a>
+        {{ 'anms.examples.elements.text8' | translate }}
+        {{ 'anms.examples.elements.text9' | translate }}
+        <a href="https://angular-extensions.github.io/elements/#/examples" target="_blank">{{
+          'anms.examples.elements.text10' | translate
+          }}</a>
+
+        {{ 'anms.examples.elements.text11' | translate }}
+        <a href="https://angular-extensions.github.io/elements/#/docs" target="_blank">{{
+          'anms.examples.elements.text12' | translate
+          }}</a>...
+      </p>
+    </div>
+  </div>
+</div>

projects/angular-ngrx-material-starter/src/app/features/examples/elements/elements.component.scss

@@ -0,0 +1,4 @@
+.main-heading {
+  text-transform: uppercase;
+  margin: 0 0 20px 0;
+}

projects/angular-ngrx-material-starter/src/app/features/examples/elements/elements.component.spec.ts

@@ -0,0 +1,37 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { LazyElementsModule } from '@angular-extensions/elements';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { SharedModule } from '../../../shared/shared.module';
+
+import { ElementsComponent } from './elements.component';
+
+describe('ElementsComponent', () => {
+  let component: ElementsComponent;
+  let fixture: ComponentFixture<ElementsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [
+        SharedModule,
+        NoopAnimationsModule,
+        TranslateModule.forRoot(),
+        LazyElementsModule
+      ],
+      declarations: [ElementsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/angular-ngrx-material-starter/src/app/features/examples/elements/elements.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+import { ROUTE_ANIMATIONS_ELEMENTS } from '../../../core/animations/route.animations';
+
+@Component({
+  selector: 'anms-elements',
+  templateUrl: './elements.component.html',
+  styleUrls: ['./elements.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElementsComponent implements OnInit {
+  routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
+
+  counter = 0;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  increment() {
+    this.counter++;
+  }
+}