In my angular 2 app project,
We use app.component.html that has structure like :
<header>
<div id="landing-content" style="display:none;">
some content here
</div>
</header>
<div class="">
<router-outlet></router-outlet>
</div>
<footer>
</footer>
Then, I have 2 file landing-page & product-page that use app.component to inheritance the layout. As expected, I want that the #landing-content div in header is displayed in landing-page, and other page isn't.
Here is content of these file :
file : landing-page.component.ts
...
#Component({
selector: 'landingPage',
styleUrls: ['./landing-page.component.css', './blog.css'],
templateUrl: './landing-page.component.html',
encapsulation: ViewEncapsulation.None
})
....
file landing-page.component.css :
#landing-content {
display : inherit !important;
}
File article-page.component.ts :
#Component({
selector: 'articlePage',
styleUrls: ['./article-page.component.css'],
templateUrl: './article-page.component.html'
})
...
File article-page.component.css
#landing-content {
display : none !important;
}
My problem is : If I click to the article link from landing-page redirect to page article, the #landing-content is still displayed, although I set the css for this one is display:none; This's only hidden when I refresh article page in browser.
So that seem the css is not instantly reload in angular 2. How can I solve this problem ?
Thanks.
Related
I have created this Angular 7 application where I'm trying to get the source of an image as follows:
<div *ngIf="showAllRec" class="pt-3">
<div *ngFor="let recommendation of allRecommendations">
<div class="row pt-2">
<div class="col-12">
<img [src]="generateProfilePictures()">
</div>
</div>
</div>
generateProfilePictures() {
const profiles = [
'../assets/profiles/dark-blue.png',
'../assets/profiles/dark-grey.png',
'../assets/profiles/light-blue.png',
'../assets/profiles/light-green.png',
'../assets/profiles/light-grey.png',
'../assets/profiles/light-red.png',
'../assets/profiles/medium-blue.png',
'../assets/profiles/medium-brown.png',
'../assets/profiles/medium-orange.png',
'../assets/profiles/medium-purple.png',
'../assets/profiles/medium-red.png',
'../assets/profiles/medium-yellow.png',
];
return profiles[Math.floor(Math.random() * profiles.length)];
}
The following results in an error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Any idea's why this is happening?
This Error occurs, because in development Angular will run Change detection twice to make sure while the first CD run was being done, components which are already checked by CD should not change values while CD run is in Progress.
In your case the method generateProfilePictures() acts as a getter for src property and every get called by CD gets a different value.
RT now i am on a mobile device, so it's hard for me to prepare a stackblitz be demo.
But you can delay this calculation either by catching the index you are generating randomly, or wrapping the function content in a settimeout/observable (still have to try, can't be sure on a cellphone )
Use ChangeDetectionStrategy.OnPush into your component.
import { Component, ChangeDetectionStrategy } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush //<====Add this property
})
Here is working stackblitz: ExpressionChangedAfterItHasBeenCheckedError Solved
Actually, i have one HTML file which contains all the code. I want to split this one on multiple files and to include them.
How can i do this?
Thanks a lot.
Let's say you have this html:
<div class="componentA">ComponentA</div>
<div class="componentB">ComponentB</div>
and this code is into the `AppComponent. You can split this two div into two component:
ComponentA.ts
#Component({
selector: 'componentA',
templateUrl: 'componentA.component.html',
styleUrls: ['componentA.component.scss'],
)}
export class ComponentA {
}
ComponentA.html
<div class="componentA">ComponentA</div>
ComponentB.ts
#Component({
selector: 'componentB',
templateUrl: 'componentB.component.html',
styleUrls: ['componentB.component.scss'],
)}
export class ComponentB {
}
ComponentB.html
<div class="componentB">ComponentB</div>
then into your AppComponent.html :
<componentA></componentA>
<componentB></componentB>
You need to write the second Component - Angular Components
Add this component to your App.module.ts - Angular Modules
If you have business logic you can also provide this by Services - Angular Services
In addition to answers above, don't forget to include
import { Component } from '#angular/core';
in your both components ts file.
I have not worked with Angular 2, but I know css and jquery.
I can't understand this syntax inside component
#Component({
selector: 'sites-stats',
styleUrls: ['./sites.stats.navbar.component.scss'],
template: `
<div [sticky]="{'zIndex': 99}">
</div>
`
})
I mean <div [sticky]="{'zIndex': 99}"> With this way my div has position: fixed;z-index:99
What should I search to understand this style syntax inside component?
BTW I need to add top to this div, I tried <div [sticky]="{'zIndex': 99,'top':'2rem'}"> but it didn't work
You have to do it as below:
[style]="{'z-index': '99','top':'2rem'}"
This calls style-binding.
Learn here:https://coursetro.com/posts/code/24/Angular-2-Class-&-Style-Binding-Tutorial
And here:https://alligator.io/angular/style-binding-ngstyle-angular/
I'm using angular 2 to create a page using different components. My layout is kinda like this:
#Component({
selector: 'my-app',
template: `
<x-header></x-header>
<div class="col-md-1">
<x-sidebar></x-sidebar>
</div>
<div class="col-md-6">
<x-table></x-table>
</div>
`,
directives: [HeaderComponent, SidebarComponent, TableComponent]
})
export class AppComponent {}
that is my main component that gets loaded from the index.html - the other components contain the tags and css pertaining to their parts. I'm adding bootstrap.min.css in the index.html and I wanted the grid system to be applied to the whole page, so I could have the components fit together. Yet, this is the layout of the current page.
As you can see the table is being rendered from the start of the page, and it goes under the sidebar and the header. I'm not sure if it's important, but I plan to add a "toggle nav bar" button somewhere.
EDIT: My question is, why are the components fitting in together? Why is the table underneath the header and sidebar? Why isn't the bootstrap grid system working?
This seems more of a css issue.
Bootstrap grid system works like count of 12 meaning if you have two elements on the page in a block then if first element is col-md-4 then second should be col-md-8 to fit in horizontally.
#Bootstrap grid system.
In your case it might be possible at template:
#Component({
selector: 'my-app',
template: `
<x-header></x-header>
<div class="col-md-3"><!-- change to col-md-3 -->
<x-sidebar></x-sidebar>
</div>
<div class="col-md-9"><!-- change to col-md-9 -->
<x-table></x-table>
</div>
`,
directives: [HeaderComponent, SidebarComponent, TableComponent]
})
For header you have to inspect if that element is statically positioned.
You're missing the parent div with class "row", change the code to this:
#Component({
selector: 'my-app',
template: `
<x-header></x-header>
<div class="row">
<div class="col-md-1">
<x-sidebar></x-sidebar>
</div>
<div class="col-md-6">
<x-table></x-table>
</div>
</div>
`,
directives: [HeaderComponent, SidebarComponent, TableComponent]
})
export class AppComponent {}
Intro
I'm using AngularJS with the AngularUI module to build an admin interface with several views.
I have a simple Layout for public pages which has one ui-view and another one for admin pages which has four ui-views (header, sidebar, main, footer).
Problem
The problem I have is if I set the ui-view main the public state won't display the login view, but if I won't set the ui-view main the public state will display the login view. The header, sidebar and footer work with any setting. It seems some setting is overriding another even I tried to set absolute names. Could someone explain what's going on here?
ui-view="main" ==> Login doesn't show
ui-view="" ==> Login shows
Visual layout:
Source code (index.html):
<body>
...
<div ui-view="public">
</div>
<div class="admin">
<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div class="container" style="margin-top:60px" ui-view="">
<!-- ^ add main here -->
</div>
<div ui-view="footer"></div>
</div>
...
</body>
Code example
I set up a minimal full code example to outline the problem:
Plunker Edit
Plunker Run
I've played around with your demo a little bit and had a look at the ui-router documentation.
If you change your 'public' state as shown below then it seems to work.
Original:
.state('public', {
url: '/login',
title: 'Login',
templateUrl: 'login.html'
})
Updated:
.state('public', {
url: '/login',
views: {
'main#': {
title: 'Login',
templateUrl: 'login.html'
}
}
})
Here is an updated plunkr:
http://plnkr.co/edit/okBWMPpWysS9srKrcxeG?p=preview
Is that what you're trying to do, or are you trying to set up login as a nested view?