Created
July 9, 2018 20:08
-
-
Save latimeks/f57eaa2e7d507b88454bdece55f0f80d to your computer and use it in GitHub Desktop.
App 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
p { | |
color: black; | |
font-size: 16px; | |
font-weight: bold; | |
padding-left: 3px; | |
opacity: .55; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class='bg-success'>This renders accordingly</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() { | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class='bg-danger'>Fragile. Be careful here</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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{ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment