i have a Angular 2 project that uses Routes and differents components. one of this components is a login page that don't show any sidebar or footer... So, i need to put ONLY on this page a background (that covers all the body).
I try to use :host {..} but don't work.
How can access to the body background property on this component?
This component is on the same level that app.component.
app.component.html has the and the login component renders here.
Can you help me?
Not sure why you are applying backgorund. If you just want to hide side bar and footer for your login page then you can simply hide them based on your active route using hidden attribute or ngIf directive. Here the refernece for ngIf
It really depends on your login.component.html if :host will work and you didn't show it. You can wrap your login.component.html in a div container and add a class to it for its background color. This one works for me.
<div class="my-container>
<!--your content --!>
</div>
Here's a plunkr for the demo
Related
I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
I am new to css and flex. Below is the working url in stackblitz.
https://stackblitz.com/edit/angular-ivy-bh8m8u?file=src/app/app.component.html
I have a left panel and main panel and a click button on the top of the page.
Requirement 1 On the click of the button i want to open the side panel. For some reason the side panel is not opening.
Requirement 2. I want to update the css to use flex if is possible because i am new to flex also
Please help.
Your sidePanelOpen variable isn't updating, and your sidePanel element is translated -150%, so it's off to the left of the screen
Never done any Angular but using the power of logic I've figured out half your answer. Now all you need to do is read a quick CSS tutorial
You originally were just setting this variable true. Using ! you can negate the sidePanelOpen value and get a toggle action going
.ts
openSideBar() {
this.sidePanelOpen = !this.sidePanelOpen;
console.log(this.sidePanelOpen);
}
Here you had the toggled class being set on the wrong element.
.html
<div [ngClass]="{'toggled' : sidePanelOpen}" class="sidebar" id="sidePanel">
<div>
<span id='close'>x</span>
<h4>Bangalore </h4>
</div>
</div>
Lastly, the toggled class won't do anything unless you have some css to hide your side panel
.css
#sidePanel.toggled {
display: none;
}
When I add clarity modal component to my component HTML template I find it located under my component DOM all the time. If my component's template is an SVG I don't see the modal dialog shown in the UI because it is inside of SVG DOM. In this case it is best to add the modal dialog to the body element. Libs such as ngx-bootstrap or bootstrap-ui allow adding modal to the body as an option but i don't see this option in Clarity Modal. Any advice on how to accomplish this?
Thanks in advance.
I have a responsive app. layout with navbar set as fixed-top and pageWidth=fixed
<xe:this.configuration>
<xe:simpleResponsiveConfiguration fixedNavbar="fixed-top"
invertedNavbar="false" pageWidth="fixed"...>
Now I want to add something like a page header but it should be page width. See picture below. So the blue panel should be page width while its content is fixed. What control can I use for that blue panel/header. Should it be another navbar?
Since you are using Bootstrap, I would recommend you create your own custom control that adds a bootstrap row after your navbar. Set the css parameters to fix the position.
The trick here: you can add standard markup into an XPage, so you "just" try what you want to achieve in plain html pages and add the row that worked for you to the custom control.
have a very basic page that I am working on that contains thumbnail images and a main image. When the thumbnail images are clicked I am using document.getElementById to change the main image. Easy to do but I now want to change my main image from landscape to portrait. This will mean that now when clicking the thumbnail I will not only need to change the main image but also the div tag dimensions. I am new to Javascript and was wondering if someone could give me a quick point in the right direction of how to go about this.
Thank you in advance for any help,
Margate
I would suggest adding/changing a CSS style class on the element and then configuring that class with all the necessary modifications. There's a lot you can do with just CSS.
You can either use a semi colon in your onclick event and add more javascript calls, or create a JavaScript function that will do all of your neccesary changes and call that method from your onclick event.
function changeStuff(){
document.getElementById("myThing").DoStuff()
document.getElementById("myOtherThing").DoOtherStuff()
}
<div id="myThing">
<img id="myOtherThing" onclick="cangeStuff();"></img>
</div>