App 1

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <ol>
        <li>Create two new Components (manually or with CLI): WarningAlert and SuccessAlert</li>
        <li>Output them beneath each other in the AppComponent</li>
        <li>Output a warning or success message in the Components</li>
        <li>Style the Components appropriately (maybe some red/ green text?)</li>
      </ol>
      <p>Use external or internal templates and styles!</p>
      <p>Feel free to create more components, nest them into each other or play around with different types of selectors!</p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-12'>
      <app-warning-alert></app-warning-alert>
      <app-success-alert></app-success-alert>
    </div>
  </div>
</div>

success.component.css

p {
  color: black;
  font-size: 16px;
  font-weight: bold;
  padding-left: 3px;
  opacity: .55;
}

success.component.html

<p class='bg-success'>This renders accordingly</p>

success.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-success-alert',
  templateUrl: './success.component.html',
  styleUrls: ['./success.component.css']
})
export class SuccessComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

warning.component.html

<p class='bg-danger'>Fragile. Be careful here</p>

warning.component.ts

import {Component} from '@angular/core'
@Component({
  selector : 'app-warning-alert',
  templateUrl: './warning.component.html',
  styles: [`p {
    border: 2px solid black;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    padding-left: 3px;
  }`]
})

export class AppWarningAlert{
}