File

src/app/shared/footer/footer.component.ts

Implements

OnInit

Metadata

selector app-footer
styleUrls ./footer.component.scss
templateUrl ./footer.component.html

Index

Properties
Methods

Methods

ngOnInit
ngOnInit()
Returns : void

Properties

currentYear
currentYear: number
Type : number
Default value : new Date().getFullYear()
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

    currentYear: number = new Date().getFullYear();

    ngOnInit(): void {
        //
    }

}
<footer fxLayout="row" fxLayoutAlign="center center" fxLayout.lt-md="column">
    <div fxFlex="1 1 33%" fxLayout="row" fxLayoutAlign="start center" fxFlex.lt-md="1 1 auto" fxLayout.lt-md="column">
        <div class="footer-logo">
            <img src="" hidden>
        </div>
        <div class="footer-links">
            <ul>
                <li>
                    <a routerLink="/privacy">
                        Privacy
                    </a>
                </li>
                <li>
                    <a routerLink="/terms">
                        Terms of service
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div fxFlex="1 1 auto"></div>

    <div fxFlex="1 1 33%" fxLayout="row" fxLayoutAlign="end center" fxFlex.lt-md="1 1 auto" fxLayout.lt-md="column">
        <p>
            Copyright&nbsp;©&nbsp;{{ currentYear }} Roberto&nbsp;Simonetti - MIT license
        </p>
    </div>
</footer>

./footer.component.scss

@import '../../../styles/variables';

footer {
    margin-top: 8px;
    padding: 16px;
    font-size: 12px;
    text-align: center;
        
    .footer-logo {
        img {
            height: 48px;
            width: 48px;
        } 
    }
        
    .footer-links {
        margin: 0 16px;

        ul {
            list-style: none;
            padding: 0;

            li {
                margin: 2px;
            }
            
            a {
                text-decoration: none;
                color: inherit;
            
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""