Other
Angular Skeleton Local Fonts
Local fonts source folder:
src/assets/fonts/inter
src/scss/base/_fonts.scss
/* inter-300 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 800;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: url('../../assets/fonts/inter/inter-v12-latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
Angular Skeleton Hamburger Menu
Favicon 404 error in console
<link rel="shortcut icon" href="#">
Masonry layout with CSS
.grid-like-pinterest {
columns: 4;
column-gap: 20px;
break-inside: avoid;
}
Use component in another with existing data
Component “A”, we want to insert to another
Social icons
Component “B”, we want to insert component “A” here
Footer
Swiper custom pagination
Language Switcher in Angular
Sticky Header in Angular
HTML
[ngClass]="isSticky ? 'sticky' : 'noSticky'" (scroll)="onScroll()"
TS
isSticky = false;
@HostListener('window:scroll', [ '$event' ]) onScroll(){
if (window.scrollY > 0) {
this.isSticky = true;
} else {
this.isSticky = false;
}
}
SCSS
&.sticky{
position: fixed;
top: 0;
width: 100%;
transition: all .3s ease-in-out;
.hirado-menu-bottom-logo {
margin-top: 0;
}
.hirado-menu-bottom-logo-img {
width: 60px;
transition: all .3s ease-in-out;
}
}
Typescript date format
{{ getFormatDate(data.publishDate) | publishDate: 'yyyy. MM. dd. | hh:mm' }}