When we create a component in Angular we have the selector that we use to display this component when necessary. When the page is generated, this selector is displayed in the DOM as an html tag.
I would like to know how this element behaves in the DOM. Does it have any default style? Does it behave like some known HTML element? Can I add classes, styles or other attributes to this tag?
Yes.
If you're using a tag selector, Angular generates a custom HTML5 tag to bind your component to.
If you're using standard view encapsulation you can style the component using the :host selector on a S/CSS file attached to your component via styleUrls or styles.
If not, you can always style the component via a tag selector as you would any other tag.
Related
I using ANTD framework for building an app.
And latelly i noticed one small issue with one of ANTD elements when i import antd-theme.css
For some reasons that css overides rules for one ANTD elements and makes it look terrible.
I cannot refuse from using this css stylesheets because it's needed for other elements all over the app.
So it's imported in index.js
Also i cannot overide this rule which breaks ANTD element, because it's stylesheet has 24844 lines.
And i will never find what exectly breaks it.
Believe me I tried:(
I was curiouse is there some how possible to make some element/elements ignore certain stylesheets?
Like something
<Radio style={{igonereCss}} />
I think you can give your element a class that you define and it will use that over the other styles
<radio class="mystyle">
Then in your main css style sheet just define a style for that. It doesn't have to do anything, but it might override the styles that are happening elsewhere.
.mystyle {
}
you can change style of specific component by overriding default class in your css file (you will get all the element classes from developer tool) for that element
.ant-radio-checked .ant-radio-inner{
background-color:#fdfdfd !important;
}
as a result it will override the style globally, to override the style for specific component only just wrap the component in some div by giving class "test" and override the css
.test .ant-radio-checked .ant-radio-inner{
background-color:#fdfdfd !important;
}
and it will update the style for specific component only
I would like to add a custom style or CSS to my Angular website elements without accessing the styles on the server or in another word how can I prevent the automatic access from global classes.
For example
<p>Something</p>
for the whole project the common CSS has been used. How can I prevent in order to use custom CSS. I am using it in Angular by having div with inner HTML styles.
I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
The latest component I am battling with is the MultiSelect Component from PrimeNG:
https://www.primefaces.org/primeng/#/multiselect
I am simply just trying to make the component's width fit 100% of the parent component.
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>
Because this did not work.
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
Any ideas? What am I doing wrong?
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"
To use styleClass simply add:
styleClass="example-css-class"
This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.
When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"
When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.
I've just started learning about Polymer custom elements.
I've created a very simple custom element, the usage of which is as follows:
<my_custom_element></my_custom_element>
The template for the custom element is:
<template>
<span>Hello</span>
</template>
If I inspect the DOM using Chrome Dev tools, I notice that my_custom_element tag appears in the DOM. I wasn't expecting this. I was expecting that this tag would be replaced by the template content. What does my_custom_element represent in its own right?
I also read that :host can be used to style a custom element internally from within its definition and it's used to style host element itself. But again I don't understand what it means to style the host element in its own right. Isn't the host element defined by its template content?
The web components model does not use <my-custom-element> as a placeholder, but as an actual and real HTML element with complex behaviors and its own contents.
Is there anyway to add new tag in Html through CSS?
like for Jquery but translated in css:
$('div.ms-inputuserfield').wrap('<a href="#"/>');
No, with CSS there is only one possibility - pseudo selectors :after/:before with 'content' property. But it wont add the element to the DOM, so it wont be possible to reference it from the javascript.