I'm wondering what's the best way to add a background to the app.component of my Angular 5 Application using Angular Material 2. I've seen a few previous stack overflow posts regarding this in previous versions of Angular and tried using them but to no avail.
So I was looking to see what is the currently reccomended way of doing this in Angular 5 w/ Angular Material 2.
Thank you
Path to the image from this component "../../images/background.jpg"
<div [class.app-dark-theme]="true">
<mat-sidenav-container fullscreen class="sidenav-container">
<!-- The Navigation button at the top of the application -->
<mat-toolbar color="primary">
<div class="select-discord">
<mat-icon svgIcon="thumbs-up"></mat-icon> Discord
</div>
<div class="select-twitch">
<mat-icon svgIcon="thumbs-up"></mat-icon> Twitch
</div>
<div class="select-twitter">
<mat-icon svgIcon="thumbs-up"></mat-icon> Twitter
</div>
<div class="select-youtube">
<mat-icon svgIcon="thumbs-up"></mat-icon> YouTube
</div>
</mat-toolbar>
<img class="img-responsive" src="../../images/background.jpg">
<!-- Main content of the website -->
<div class="app-content">
<mat-card>
text here
</mat-card>
</div>
</mat-sidenav-container>
</div>
A proper way of adding a background would be to add an id to your container and give that id the following css rule:
#my-bg {
background: url('../../images/background.jpg') no-repeat center;
background-size: cover;
}
Related
So, I am new to angular and building a new angular app which will consist of multiple components and I want the navbar and sidebar to be fixed on all components of my app.
I built navbar and sidebar as separate components. I want the navbar and sidebar to be like this, with the app content(all the component content) being in the white part of the screen:
I know the navbar can be easily imported with html like <navbarComponent><navbarComponent>, but the sidebar is a bit problematic to me since I want the app-content to be on the right of the sidebar component, so the only solution I know is to make a container in css like this:
random-component-html:
<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
<div class="al-left">
<app-sidenav-bar></app-sidenav-bar>
</div>
<div class="al-right">
<div class="container">
<h2>Apps:</h2>
<mat-nav-list>
<mat-list-item *ngFor="let app of apps" (click)="redirect(app)">
<button mat-icon-button> {{app.name}}
</button>
</mat-list-item>
</mat-nav-list>
</div>
</div>
</div>
random-component-css:
.container1{
width: 100%;
}
.al-left{
float: left;
max-width: 15vw;
}
.al-right{
float: right;
max-width: 85vw;
}
but I feel that there must be an easier way to do this. Does anybody know a solution?
You can route all your other components within this white block
Lets say:
<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
<div class="al-left">
<app-sidenav-bar></app-sidenav-bar>
</div>
<div class="al-right">
<div class="container">
<router-outlet></router-outlet>
</div>
</div>
</div>
You can add your header(navbar), sidebar, footer component in your app.component.html
<app-header></app-header>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
<router-outlet></router-outlet>
You can also add footer as well as shown in above example.
And header sidebar & footer will remain in all the rest of the components.
My Angular Version: Angular 7
I just started learning Angular and I'm trying to use a downloaded Bootstrap template in my Angular project. My owl-carousel works great when it's on index.html in my Angular project. But it does not when it's moved to a new component. I'll be providing the steps I followed. Kindly help me troubleshoot
Step 1: I copied all assets (JS, CSS & Images) to the assets folder under src in Angular
Step 2: Copies the code in index.html in the template to the angular index.html and changed the 'src' for images and JS files in index.html
At this point, everything works PERFECT!
Step 3: Since it's not a good practice to keep everything in one file so I tried to refactor the code by moving the home-slider which is based on 'owl-carousel' to a component called 'home' as below
Below is the entire code in home-component.html and all imports such as Javascript and CSS are already in index.html of my Angular Project
<!-- Welcome Area Start -->
<section class="welcome-area">
<div class="welcome-slides owl-carousel">
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInLeft" data-delay="200ms">Creativity & Excellence</h6>
<h2 data-animation="fadeInLeft" data-delay="500ms">Welcome to to my Web</h2>
Explore our work
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInDown" data-delay="200ms">Hotel & Resort</h6>
<h2 data-animation="fadeInDown" data-delay="500ms">Welcome To my Web </h2>
Discover Now
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I expected the code to have a working owl-carousel slider when the component is selected in app-component.html using <app-home></app-home> but the actual output just gives nothing.
Note: The selector is right as if I give plain text and call the selector as <app-home></app-home> in app-component.html it works but not the owl-carousel
Thanks in advance.
when are you initialising the owl carousel? because index page loads with the application and hence its working in index, but component page only loads when its navigated so you need to call owl initialising explicitly after component is loaded into DOM
$(".owl-carousel").owlCarousel();
I want to display sticky header.On scroll header1should be hidden and header2 should show,How can i achieve this using material?
Here is my expected DEMO
Thanks in advance
The basic implementation of a sticky header is the same whether you use Angular Material or not - watch the scroll position of the page and hide or show the second header as desired. Here's a rough example using the Angular Material toolbar component for the header:
<div style="min-height: 150vh;"> <!-- Set minimum height to force a scrollbar -->
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>Header 1</span>
</mat-toolbar-row>
</mat-toolbar>
<mat-toolbar color="secondary" style="position: fixed; top: 0;" *ngIf="scrolled">
<mat-toolbar-row>
<span>Header 2</span>
</mat-toolbar-row>
</mat-toolbar>
</div>
And in the .ts file:
scrolled: false;
#HostListener('window:scroll', [])
onWindowScroll() {
// Depending on the desired effect, you should probably only show the second header
// if you've scrolled past the first header's height
this.scrolled = window.pageYOffset > 48;
}
Is it possible to include a round thumbnail in the paper-card element following the material design card specification on https://material.io/guidelines/components/cards.html#cards-actions ?
The webcomponents.org documentation only showcases a fullscreen image implemented via <paper-card image="demo/donuts.png">, I however would like to implement something like
Is this possible with the paper-card Polymer 2 element?
You can achieve that by using paper-icon-item inside paper-card.
<paper-card heading="Emmental">
<div class="card-content">
<!-- Paper icon item starts here -->
<paper-icon-item>
<div class="avatar blue" slot="item-icon"></div>
<paper-item-body two-line>
<div>Alphonso Engelking</div>
<div secondary>Change photo</div>
</paper-item-body>
</paper-icon-item>
<!-- Paper icon item ends -->
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
Hope this helps :)
I'm developing an application using Ionic and on the first page, I'm Trying to use Ionic Grid system to show some cards with an image background.
The Problem is that When I visit the page in the size of my own laptop's display everything is fine and cards have same height!
Size of the Display Screenshot
But once I resize the browser window the second card height changes (or Using Chrome's Emulator)
I want these two to have the same height in any situation. I've tried to fix this but no success.
Half size of the Display Screenshot
Here's the Snippet I've made. It's not my full code but it demonstrates the Issue I have.
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope) {
})
<link href="http://code.ionicframework.com/1.2.4/css/ionic.min.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js"></script>
<div ng-app="ionicApp">
<ion-content>
<!-- Row -->
<div class="row row-center">
<div class="col col-75">
<!-- Card -->
<a href="{link to a part}">
<div class="card">
<!-- Image of the Card -->
<div class="item item-image">
<img class="card-bg" src="http://placehold.it/800x200"/>
</div>
</div>
</a>
</div>
<div class="col col-25">
<!-- Card -->
<a href="{link to a part}">
<div class="card">
<!-- Image of the Card -->
<div class="item item-image">
<img class="card-bg" src="http://placehold.it/500x400"/>
</div>
</div>
</a>
</div>
</div>
</ion-content>
</div>
JSFiddle Link
It's because when you are using item-image class, Ionic sets images width to 100% and when you test your app on laptop or desktop, the right image can be shown in 100% of width and 100% of height, but when you test your app on phone, when browser tries to set the image width to 100%, the image height changes to less than 100%, and as you've seen the height of images is different, you should change your strategy