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 {
/* . . . */
}
Related
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've created a template case component which I'm intending to use for multiple cases. To use the component as a template, I used ng-content select="".
It works fine, but not completely as desired. For example:
I have a div with a background image, its style is being configured inside of the template component:
<div class="front-image min-vh-100 min-vw-100" [style.transform]="'scale(' + scale + ')'">
</div>
To make this usable as a template, I replaced the given code with: <ng-content select=".front-image"></ng-content> and used the template inside of another component like this:
<app-case-template *ngIf="cases[3] as case">
<div class="front-image min-vh-100 min-vw-100" [ngStyle]="{ 'background-image': 'url(' + case.image + ')'}"
[style.transform]="'scale(' + scale + ')'">
</div>
</app-case-template>
How can I achieve the template to always get its styling from the template component - right now I had to declare its styling inside of the new component to get it working. Additionally [style.transform] stopped working.
Is there something like a bypass?
You may be going about this the wrong way. I'll try to outline a good way to do it. First, have a directory for your templates:
templates
- template.component.css (generic styling)
- template.component.html (your markup)
- template.component.ts (your ts/js)
Set up your template.ts for use:
import {Component} from '#angular/core';
#Component({
selector: 'template-component',
templateUrl: 'template.component.html'
styleUrls: ['./template.component.css']
})
export class TemplateComponent {
}
Register it in your component.module.ts (or whatever you may have called it):
...
import {TemplateComonent} from './templates/template.component';
...
const exportedComponents = [
SvgIconComponent
]
If needed, have your shared.module.ts export it:
import {ComponentsModule} from './components/components.module';
...
exports: [ComponentsModule]
Now you can use it like it's a custom HTML tag (your selector):
<template-component class="template"> </template-component>
Now it will always grab the css styling from itself, but you can stick a custom class in that tag as I have done, or call it like this from your main component's style page:
template-component {
margin: 10px;
background-color: grey;
}
There's a lot you can do including setting #Input() tags in your template that can be called from your HTML tag. You can also use Angular bindings to dynamically enter values or text into it. Many options here.
Note: instead of calling them templates, consider calling them shared components, or shared modals (if so). Have a directory called shared > components and have a custom-name directory with the like in there for organization.
Is there a way to call a component selector from another html template. For instance:
#Component({
selector: 'reports',
templateUrl: 'reports.html'
})
Can I call that selector "reports" from within another templateUrl? I'm trying to split out my html into separate files in order to make it more manageable. I know how to set it up like <reports></reports> in the html. I'm not sure how I would set this up or call it per say from within the modules.
When you specify a selector, you are basically defining a custom HTML element. So you can use it in any other template in the application as you've shown: <reports></reports>.
Angular modules provide the "template resolution environment". So you need to ensure that the component containing the "reports" selector is declared in the same component as any template that uses it, or is "pulled in" by way of an Angular module import.
I have an example here: https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final Check out the star.component.ts.
selector: "[reports]"
selector: "[reports]"
I think your split your html page sub pages, it's very easy.
<body>
<div clss="ui container">
<reports></reports> //the reports page view render hear,just add
this component class in NgModules, it will works
</div>
<div clss="ui container">
<reports-list></reports-list> //you can add another file also same
</div>
</body>
I have a component and its HTML file.
component:
hello-world.component.ts
import {Component} from 'angular2/core';
#Component({
selector: 'hello-world',
templateUrl: 'hello-world.html'
})
export class HelloWorld {
yourName: string = '';
}
Template:
hello-world.html:
<label>Name:</label>
<h1>Hello {{yourName}}!</h1>
Now, I have other html template.html which has no component, for example it contain,
template.html
<h1>Welcome to template file</h1>
<p> This is an example file </p>
Now, I wanted to include template.html file in the hello-world.html. How can I do that.
In Angular1 I used to do,
<div ng-include src="'template.html'"></div>
How can I do it in Angular2? I am very new to Angular2.
I searched this question in many places, every one is giving an answer which has components. but didn't get my required solution.
Short: isn't possible yet out of the box.
You could create a Directive like old ng-include which will do the work for you..
That Directive would load the html-file and then paste it to the DOM
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)