Develop Reference

How to set different css for different pages without changing HTML (Angular 4+)?

I am using one HTML which has a nav bar, but the navbar in page2 has different text color. I don't want to make two different divs for each page.
Currently, what I am doing is:
<div *ngIf="headerType !== 'page1'">
....
</div>
<div *ngIf="headerType == 'page1'">
....
</div>
I would like to just change the font-color, without copy/pasting two separate bodies. How can I do this in CSS?

Using ngStyle, You can do something like this:
<div [ngStyle]="{'background-color':headerType === 'page1' ? 'green' : 'red' }"></<div>

In Angular you can define component specific CSS/Sass files in your component.ts file
Like:
#Component({
selector: 'app-browse',
templateUrl: './browse.component.html',
styleUrls: ['./browse.component.css'],
})

you can use a parameter (can be a boolean variable from ts for example) to determine on which page you are and then bind it to ngClass.
something like this for example:
<div [ngClass]="{'first': first, 'second': !first}">My Nav<div>
hope it helped.

Render Angular 4 component with text coming in from an API

I want to render incoming text from an API as subsequent HTML and component template.
Most of the solutions I found here use #ViewChild to inject the components but that doesn't work for me since I need to iterate the same behavior for all items in the *ngFor loop.
This is how the code would look like:
The template of the component rendering the incoming messages:
<div *ngFor="let item of messages">
<compile-component [template]="item.html"></compile-component>
</div>
Incoming message structure (item.html):
<my-component></my-component><div>Some html</div>
Component to compile:
#Component({
selector: 'my-component',
template: '<div>It works</div>',
styleUrls: ['./my-component.component.css']
})
export class MyComponent{ }
Output would look like this:
<div>It works</div><div>Some html</div>
I am looking for the solution for compile-component here.
Any help is much appreciated. Thanks in advance.

You should be able to do that via ComponentFactoryResolver. See angular docs about this here:
https://angular.io/guide/dynamic-component-loader

Injecting Angular2 Components as a class or attribute rather than a tag

In Angular1 you could directly insert the HTML into the index.html or index.php like this:
<div ng-controller="pricingController">
{{price}} - Total Cost
</div>
In Angular2 you have to use a component which forces you to use a TemplateURL in the component.
I want to do something more similar to Angular 1's format.
Something like this directly in the HTML:
<div ngComponent="pricing-component">
{{price}} - Total Price
</div>
Rather than this:
<pricing-component></pricing-component>

If you want to use an attribute you can use the attribute selector, and a directive. A directive is a component without a template. Or better said, a component is a directive with a template:
<div pricing>
{{price}} - Total Price
</div>
And your Pricing will have this selector in the directive annotation:
#Directive({
selector : '[pricing]'
})
export class PricingDirective {}

How to make angular2 not wrap items?

All arranged, everything was fine until it became necessary to create a component which is TR.And when inserting that component onto the page Angular2 does the following:
<my-component>
<tr>...</tr>
</my-component>
It all falls down and bleeds. How can I make it not do that? Where to look? Thanks in advance.

In fact there is no more support for the "replace: true" feature of Angular1.
You could leverage an attribute in the selector to attach the component:
#Component({
selector: '[my-component]'
(...)
})
and use it this way:
<div my-component>
<tr>...</tr>
</div>

Nested components elements

I'm stuck on a template/component problem and I couldn't find any answer.
I'm trying to move a plain Javascript project to Angular2. In my project, I actually create some elements by inherit from others.
Example:
File header.html
<header class="some_class"></header>
File header_base.html inherits from header.html
<header> <!-- This is the header element from the header.html file. -->
<img class="some_class" src="path/to/my/image">
...
</header>
EDIT:
To clarify how I actually do, to 'inherits file from another', I use Javascript.
My problem is that I can't find out how to do that in Angular.
My question is, is there any way to accomplish something like that or do I need to change my way of 'templating' things ?
Thanks by advance.

Your question is a little confusing. Can you provide more detail about what the end result should be?
It sounds like what you are looking for is shadow dom insertion point where you have a component that you can put content into. Where you have a component called Header that has some markup and styles applied, but then you can use it in different places with different content?
If so, here is how you would do it (Note: this is Typescript but could be done in plain Javascript. Check the Angular docs for examples):
CustomHeader.ts:
#Component({
selector: 'custom-header',
template: '<header class="some-class"><ng-content></ng-content></header>'
})
export class CustomHeader {
//if you need any logic in that component
}
Then in whatever component you need to use this component, you would import it:
app.ts:
import {CustomHeader} from './CustomHeader';
#Component({
selector: "my-app",
directives: [CustomHeader],
template: `<div>
<custom-header>
<img class="some_class" src="path/to/my/image" />
</custom-header>
</div>`
})
The result is that when you use the component in your html, its content will get wrapped by the contents of the CustomHeader's template. Not sure if that is exactly what your need was though.
EDIT: Here's a good article describing this type of component: http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html