I'm creating Ionic 4 Angular app, and creating header section.in the header section i'm using ion-toolbar.when i has been use css class test in ion-icon but css class not working.below given stackblitz link.
my ion-toolbar example, see home page
You have to set the correct css file for your page.
For example in home.ts, change the #Component block to the following and it will work correctly
#Component({
selector: 'page-home',
templateUrl: 'home.html',
styleUrls: ['home.css']
})
Use this one styleUrls: ['/home.css']
Related
I am currently working on an Angular 10 project where I have to add native HTML-elements like div, table, p, h1 to the DOM (this could be achieved in Angular with the DomSanitizer) from the TypeScript class. But I also want to create an Angular component inside an created div.
Because creating just one component is easy with the ComponentFactoryResolver.
For example, this should be created from Typescript dynamically:
<div>
<my-component></my-component>
</div>
How can I achieve this?
Kind regards,
Steve
I think is this what you're looking for:
import {Component} from '#angular/core';
#Component({
selector: 'example',
templateUrl: '<my-component></my-component>',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
}
You don't need <div> unless you use him for style or other thing.
I've just started my adventure with Angular and I've faced a problem. I know that you can create a property in app.components.ts and display it in html code by putting its name into curly braces and it should output the property on the wesite In my case it just doesn't work and I'a actually clueless. That is my app.components.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'AngularCV';
}
There is a property named "title" that I want to use in my html code. My app.component.html:
<div>
{{title}}
</div>
After running live server the browser displays exactly what I typed without compiling it, so
"{{title}}" is what I see on the webpage, instead of "AngularCV" I searched through similar problems, but nothing worked. Maybe it is trivial, but I am stumped right now.
All right, I just created a brand new angular app, and modified my current html files to match those created in the brand new app. Everything works as it should. As far as I undestand this, the src/index.html should contain just head and empty body with just mark. And all the stuff but without the head should be put into app.component.html. Hope that helps someone in the future.
I want 2 components in an angular 6 application
I wish first component to use bootstrap min.css file , and the other not
how can i implement this
you can use ViewEncapsulation for that.
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
Using shadow dom ensures that your base project styling will not be applied.
I work on the Ionic 3 with angular 4. Each HTML file has its CSS file. Sometimes, I called in the HTML a case that is linked to another HTML.
I understand that this CSS class is injected into the main.js
Example of arboressance:
page1.hmtl
page1.css
page1.ts
page2.html
page2.css
page2.ts
I called a CSS from page1.css to page2.html.
My question is : Is this behaviour linked to the order of the ts declared on the app.module.ts?
page1 {
.marginForEmplacement{
margin-left: -5px!important;
}
}
page2.html
<div class="marginForEmplacement"> some text </div>
Why do you need to complicate the situation?That is why Ionic team has given the app.scss file. Just put your shared or global CSS details on that file and use wherever the places throughout the app. So simple no?
app.scss
.marginForEmplacement {
margin-left: -5px;
}
page2.html
<div class="marginForEmplacement"> some text </div>
The question isn't entirely clear but an Angular component can have multiple style sheets imported into a component, see styleUrls. This would take precedence over the global stylesheets. This is just an example but could be a cause of the problem. See documentation here.
#Component({
selector: 'app-root',
template: `
<h1 class="sheet1-h1-header'>Tour of Heroes</h1>
<app-hero-main [hero]="hero" class="sheet2-wrapper'></app-hero-main>
`,
styleUrls: ['./sheet1.css', './sheet2.css']
})
export class HeroAppComponent {
/* . . . */
}
In this example, from the official Angular 2 docs, the decorator looks like this:
#Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
Example: would prefer not not have my HTML code littered with non-standard elements, and would prefer something like (NB: ng-angular is only an example I would like to see):
import { Component } from '#angular/core';
#Component({
template: '<h1>Wait! Bloody wait some more.</h1>'
})
export class ListComponent { }
and used something like this:
<div ng-component="List"</div>
Or is the a Component decorator like this used only when you want to create a new HTML element, and then stick to a plain Listcontroller for the div in my example above?
A selector is not always needed eg. you have a top component of a module that is loaded by router and displayed in
selector is needed for any other type of component. otherwise angular wouldn't know what component it should render.
I haven't heard about attribute "ng-component"
[EDIT]
kit effectively answered correctly in his/her first comment:
You have to create an element that would enclose your template however it doesn't have to be a new HTML element because selector can be a element, [attribute] or class, eg.
<div test>
could be an element for component with selector: '[test]'
A component is a new HTML element, something like <my-component>Hello</my-component>.
I think what you want is a directive.
An Attribute directive changes the appearance or behavior of a DOM element.
So you can do something like <div makeItBlue>Blue stuff</div>
Just to elaborate: The selector can be a standard CSS-selector, so your HTML can be non-angular-centric.
Example:
#Component({
selector: 'div.player-list',
...
})
export class PlayerList {
}
will match <div class="player-list and-possibly-some-other-classes">...</div> (i.e. replacing the div with your angular template)