src/app/explore-container/explore-container.component.ts
| selector | app-explore-container |
| styleUrls | ./explore-container.component.scss |
| templateUrl | ./explore-container.component.html |
Inputs |
| name | |
Type : string
|
|
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent {
@Input() name?: string;
}
<div id="container">
<strong>{{ name }}</strong>
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
./explore-container.component.scss
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}