Develop Reference

Add style to angular div

I have not worked with Angular 2, but I know css and jquery.
I can't understand this syntax inside component
#Component({
selector: 'sites-stats',
styleUrls: ['./sites.stats.navbar.component.scss'],
template: `
<div [sticky]="{'zIndex': 99}">
</div>
`
})
I mean <div [sticky]="{'zIndex': 99}"> With this way my div has position: fixed;z-index:99
What should I search to understand this style syntax inside component?
BTW I need to add top to this div, I tried <div [sticky]="{'zIndex': 99,'top':'2rem'}"> but it didn't work

You have to do it as below:
[style]="{'z-index': '99','top':'2rem'}"
This calls style-binding.
Learn here:https://coursetro.com/posts/code/24/Angular-2-Class-&-Style-Binding-Tutorial
And here:https://alligator.io/angular/style-binding-ngstyle-angular/

How to make style css live reloading in angular 2

In my angular 2 app project,
We use app.component.html that has structure like :
<header>
<div id="landing-content" style="display:none;">
some content here
</div>
</header>
<div class="">
<router-outlet></router-outlet>
</div>
<footer>
</footer>
Then, I have 2 file landing-page & product-page that use app.component to inheritance the layout. As expected, I want that the #landing-content div in header is displayed in landing-page, and other page isn't.
Here is content of these file :
file : landing-page.component.ts
...
#Component({
selector: 'landingPage',
styleUrls: ['./landing-page.component.css', './blog.css'],
templateUrl: './landing-page.component.html',
encapsulation: ViewEncapsulation.None
})
....
file landing-page.component.css :
#landing-content {
display : inherit !important;
}
File article-page.component.ts :
#Component({
selector: 'articlePage',
styleUrls: ['./article-page.component.css'],
templateUrl: './article-page.component.html'
})
...
File article-page.component.css
#landing-content {
display : none !important;
}
My problem is : If I click to the article link from landing-page redirect to page article, the #landing-content is still displayed, although I set the css for this one is display:none; This's only hidden when I refresh article page in browser.
So that seem the css is not instantly reload in angular 2. How can I solve this problem ?
Thanks.

Does multislot transclusion works with Angular 2 components?

let's say I've got the following basic component with two slots:
// my-component.component.ts
#Component({
selector: 'my-component',
template: `
<div class="my-component">
<div>
Title:
<ng-content select="my-component-title"></ng-content>
</div>
<div>
Content:
<ng-content select="my-component-content"></ng-content>
</div>
</div>`
})
And into the second slot ('my-component-content') I want to insert regular Angular 2 component...
<div class="app">
<my-component>
<div class="my-component">
<div>
Title:
<my-component-title>
This is the Component title!
</my-component-title>
</div>
<div>
Content:
<my-component-content>
<some-regular-angular2-component></some-regular-angular2-component>
</my-component-content>
</div>
</div>
</my-component>
</div>
Where 'some-regular-angular2-component' is a selector of some Angular 2 component...
#Component({
selector:'some-regular-angular2-component'
})'
Problem is that 'some-regular-angular2-component' is never transcluded into ng-content second slot...Only regular HTML works for me...Of cource I tried to set 'some-regular-angular2-component' into [directives] of parent component, but Angular 2 component is not recognized inside of the ng-content...Or does this work for you?

You need to add <ng-content></ng-content> to the view (template) of <my-component-content> If <my-component-content> doesn't support transclusion, its children won't be shown. The <ng-content> tags in your code apply only to elements that match directly, but not their children.

Just to answer my question, yes, angular 2 transclusion supports inserting of Angular 2 components. I had stupid typo in the code.

Yes it does. It is now called content projection. See this example of a modal dialog with multiple slots.

Custom user template for a component in Angular 2

I've got a component that has it's default template:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: `
<div class="container">
<div class="content">
<div *ngIf="contentRef.childNodes.length == 0">DEFAULT: <b>{{contentData}}</b></div>
<div #contentRef><ng-content select=".content"></ng-content></div>
</div>
</div>
`
})
export class MyComponent {
contentData = "DATA";
}
I would like a user to be able to specify his own templates for some parts of the component when using it. So it can be written as follows:
import {Component} from 'angular2/core';
import {MyComponent} from './my.component';
#Component({
selector: 'my-app',
directives: [MyComponent],
template: `
<my-component></my-component>
<br/>
<my-component>
<div class="content">
CUSTOM: <i>{{contentData}}</i>
</div>
</my-component>
`
})
export class AppComponent { }
It produces the following markup:
<my-app>
<my-component>
<div class="container">
<div class="content">
<!--template bindings={}--><div>DEFAULT: <b>DATA</b></div>
<div></div>
</div>
</div>
</my-component>
<br>
<my-component>
<div class="container">
<div class="content">
<!--template bindings={}-->
<div><div class="content">
CUSTOM: <i></i>
</div></div>
</div>
</div>
</my-component>
</my-app>
So the component's 'contentData' property is not rendered within the custom template. Is it possible to provide the custom template with a specific binding context somehow? Or is there a better way to implement the case with a custom user template?

How to realize website with hundreds of pages in Angular2 shows an approach.
This is no official solution and to me it currently looks like this is likely to break before the final release.
Angular2 has a strong tendency to statically building and resolving the bindings.
Either you can work with DynamicComponentLoader or you don't build on Angulars binding features for dynamically added content.

How to use nested templates in Angular.js?

I have root selector:
<body>
<my-app>
Loading...
</my-app>
</body>
In him loaded component with template:
#Component({
selector: 'my-app',
template: `
<p>It is nested content:</p>
<div class="content">
<nested-selector></nested-selector>
</div>`
})
Now I want to download the content in nested-selector:
#Component({
selector: 'nested-selector',
template: `<p>{{content}}</p>`
})
export class Mycomponent{
public content = "qwerty12345";
}
As a result, appended in the end an string:
<nested-selector _ngcontent-rbv-2="">qwerty12345</nested-selector>
As a result, we get the following page:
<body>
<my-app>
<p>It is nested content:</p>
<div class="content">
<nested-selector></nested-selector>
</div>
<nested-selector _ngcontent-rbv-2="">qwerty12345</nested-selector>
</my-app>
</body>
Although page should look like this:
<body>
<my-app>
<p>It is nested content:</p>
<div class="content">
<nested-selector>qwerty12345</nested-selector>
</div>
</my-app>
</body>
Why is this happening? Why he creates a new selector? How to make it work properly?
EDIT:
I attached the main project files to uncover the essence of the problem:
https://plnkr.co/edit/DsDpXG72bjpyaWfPc1S0?p=preview

I'm pretty sure you HTML is invalid.
.
I tried to reproduce in this Plunker but it shows the desired behavior.