I am trying to programmatically change the background image in angular.
this.document.getElementsByClassName("modal-header email-header")[0].style= 'background-image=""
It does not seem to work.
In angular we use variables in .ts and bind the variables in the .html. So you can declare a variable in your .ts
background:string="assets/img.jpg"
And in .html
<div class=""modal-header email-header"
[style.background-image]="background">
When in .ts you change the variable (I imagine in a function or in an event)
this.background=null; //in any place
The "style.background-image" change in .html
NOTE: Instead use [style.background-image], you can also use [ngStyle] or [ngClass]
NOTE2: I always suggest make a tour of Heroes when we start with Angular or beings with Getting started with Angular
Related
I am learning react in which I am making components and making css file for each component but if I make a className lets say "temporary" then if I make another component and while I am not importing the previous component's css file but then also if i give the class "temporary" to any other element of this component then also it take the css styling. Why is this happening I don't know.
You create multiple CSS files and several components in your React project and connect them if needed.
But this is what you see, not what happens.
React actually converts all your CSS code into a file and then outputs it.
This is also true for components.
You create dozens of CSS and JS files, but React creates two files for you.
In Recycling, we only create a few files to write more readable code.
If you have a problem with this, you can research the module.css in React and use it to prevent this from happening to you.
Again, if you have any questions about this, I am at your service.
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
I am trying to use two snippets as components from bootsnipp, and each snippet has its own css. i tried to put them both in the style.css, but it ended up damaging one component for the other to look fine.
I'm thinking about how to use both these styles.css, since in the index.js i can only import style.css.
can i use router to use multiple pages, and import style.css in the second page? but wouldn't that mean i'll have to use the second page as app.js, which is called only once in react? this is kind of confusing me.
EDIT: can I put the css of one component in another css file, and then import it INSIDE that component instead of index.js?
it doesn't bother me by the way whether i put that component inside index.js or not; in fact, I'm not going to use it there.
I would say you need to deal with the global namespace issue. You could create two components with its own css file.
Then add a unique className to stop collisions.
The benefit here is that you could also enable code spitting, so you would only load html/css/js when you need it (see React.lazy).
—-
By trying to load two styles in different times or manners you will still have the same issue of conflicting styles.
I'm using Angular CLI and it's preconfig'ed webpack bundle. I have a bit of HTML that's inserted into a template via [innerHTML] and want to apply styling to it, but I notice that the final styles.bundle.js doesn't contain the style I write. I assume webpack is smart and strips out the CSS definition since it's not in any template, but being added via JS.
In my template I simply have this:
<div [innerHTML]="message"></div>
Which gets a value in the controller such as:
this.message= '<p class="notice">Your account was successfully activated!</p>';
And while I have .notice defined in my .less file, it doesn't appear in the style bundle. When I had the notice class previously in the template itself, it worked fine.
Is there a way for me to keep this from happening? Should I be coding differently? Or is the problem elsewhere and not what I think it is?
Since the HTML being added by innerHTML is not directly in the scope of Angular, I needed to add /deep/ selector before .notice in my less file, to make sure children can access the CSS value.
I'm working on a React/Redux app with Webpack that displays UI components and allows the user to change colors of those components. I am styling using CSS Modules with scss. I would prefer to keep all the styling within the scss files rather than doing any inline styles with JS. I am looking for a way to pass properties from the React component into the corresponding scss file.
For example, I'm getting the button color from the React props. I need to find a way to turn that into a Sass variable and inject into the scss file. Is there a way to accomplish this?
I think that the best option is to use react-css-themr. With it you can assign class name based to selection of user, or, in your case, you can use the context-theming for choose right scss to apply on component.
This is used on react-toolbox project for theming the material components, if you want to watch a good example.