nerdic-coder

import { Component, State } from '@stencil/core';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';

@Component({
  tag: 'app-heroes',
  styleUrl: 'heroes.css'
})
export class Heroes {

nerdic-coder

import { Observable, Subject } from 'rxjs';

export class MessageService {

  private static _instance: MessageService;

  private messages: string[] = [];
  private subject: Subject<string[]> = new Subject();

  add(message: string) {

nerdic-coder

import { render } from '@stencil/core/testing';
import { Messages } from './messages';

describe('app-messages', () => {
  it('should build', () => {
    expect(new Messages()).toBeTruthy();
  });

  describe('rendering', () => {
    beforeEach(async () => {

nerdic-coder

import { Component, State } from '@stencil/core';
import { MessageService } from '../../services/message.service';

@Component({
  tag: 'app-messages',
  styleUrl: 'messages.css'
})
export class Messages {

  private messageService: MessageService;

nerdic-coder

<main>
  <stencil-router>
    <stencil-route url='/' component='app-heroes' exact={true}>
    </stencil-route>
  </stencil-router>
</main>

nerdic-coder

<nav>
  <stencil-route-link url="/dashboard">Dashboard</stencil-route-link>
  <stencil-route-link url="/heroes">Heroes</stencil-route-link>
</nav>

nerdic-coder

    /* DashboardComponent's private CSS styles */
    [class*='col-'] {
      float: left;
      padding-right: 20px;
      padding-bottom: 20px;
    }
    [class*='col-']:last-of-type {
      padding-right: 0;
    }
    a {

nerdic-coder

import { render } from '@stencil/core/testing';
import { Dashboard } from './dashboard';

describe('app-dashboard', () => {
  it('should build', () => {
    expect(new Dashboard()).toBeTruthy();
  });

  describe('rendering', () => {
    beforeEach(async () => {

nerdic-coder

import { Component, State } from '@stencil/core';
import { Hero } from '../../models/hero';
import { HeroService } from '../../services/hero.service';

@Component({
  tag: 'app-dashboard',
  styleUrl: 'dashboard.css'
})
export class Dashboard {

nerdic-coder

<stencil-route-link url={`/detail/${hero.id}`} class="col-1-4">
  <div class="module hero">
    <h4>{hero.name}</h4>
  </div>
</stencil-route-link>