Angular2 Sub Component Break CSS Relationship

Angular2 sub component break css relationship

Give this a shot, if you don't want <my-single-product></my-single-product> elements and would like <div my-single-product></div> instead.

BUT Angular 2 warns you not to do this in their STYLE GUIDE

in your parents view

<ul materialize="collapsible" class="collapsible" data-collapsible="collapsible" [materializeParams]="params">
    <li>
        <div class="collapsible-header">
            My Products
        </div>
        <div class="collapsible-body">
            <div class="card horizontal hoverable lighten-4 my-product" *ngFor="let product of products">                         
                <div my-single-product [categories]="categories"></div>
            </div>
        </div>
    </li>
</ul>

and then in your child's component

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
@Component({
    selector: "[my-single-product]",
    templateUrl: "/js/app/templates/my-single-product.html"
})

export class MyChildComponent {
    @Input() categories: CategoryList[];

}

This will create a div with a property my-single-product RATHER than creating a html element <my-single-product>

So when you inspect in chrome you will see

<div my-single-product></div>

RATHER than

<my-single-product></my-single-product>

And your css should be fine now

Angular2 selector tag breaks css parent/child relationship

How to access CSS of Angular child component with ::ng-deep

This solution to the problem is this:

:host ::ng-deep app-operator-filter{
  .header-logos-card {
    grid-template-columns: repeat(4,1fr) !important;
  }
}

!important was a crucial addition as the changes were being overwritten without it.

Angular2: Passing data to child components

@Input() is currently not supported on the root component (AppComponent).

See also https://github.com/angular/angular/issues/1858

As a workaround you can use

constructor(ref:ElementRef) {
  ref.nativeElement.getAttribute('mydata');
}

<my-app mydata="Some sample data">
  loading...
</my-app>

(allows only String)

Call function from other component into current in angular without any parent child relationship

A good solution for this problem would be creating a service that contains a rxjs subject so that the first component can subscribe and the second can emit values to inform the other one that it should call the function

EXAMPLE

export class ComponentOne {
    constructor(private myService: MyService) {}

    ngOnInit() {
        this.myService.subject.asObservable().subscribe(() => this.myRoleClick())
    }

    myRoleClick() {
        // DO something
    }
}

export class ComponentTwo() {
    constructor(private myService: MyService) {}

    myRole() {
        this.myService.subject.next();
    }
}

export class MyService {
    subject = new Subject<void>();
}

Angular2: child component access parent class variable/function

If you use input property databinding with a JavaScript reference type (e.g., Object, Array, Date, etc.), then the parent and child will both have a reference to the same/one object. Any changes you make to the shared object will be visible to both parent and child.

In the parent's template:

<child [aList]="sharedList"></child>

In the child:

@Input() aList;
...
updateList() {
    this.aList.push('child');
}

If you want to add items to the list upon construction of the child, use the ngOnInit() hook (not the constructor(), since the data-bound properties aren't initialized at that point):

ngOnInit() {
    this.aList.push('child1')
}

This Plunker shows a working example, with buttons in the parent and child component that both modify the shared list.

Note, in the child you must not reassign the reference. E.g., don't do this in the child: this.aList = someNewArray; If you do that, then the parent and child components will each have references to two different arrays.

If you want to share a primitive type (i.e., string, number, boolean), you could put it into an array or an object (i.e., put it inside a reference type), or you could emit() an event from the child whenever the primitive value changes (i.e., have the parent listen for a custom event, and the child would have an EventEmitter output property. See @kit's answer for more info.)

Update 2015/12/22: the heavy-loader example in the Structural Directives guides uses the technique I presented above. The main/parent component has a logs array property that is bound to the child components. The child components push() onto that array, and the parent component displays the array.

Styling child elements using global CSS in Angular 2

The way I managed to work around this limitation was to change the way my component's directive is called. Normally, you would define the selector like this:

@Component({
  moduleId: module.id,
  selector: 'sidebar-menu',
  ...
})

And call it using <sidebar-menu></sidebar-menu>. Instead, I defined the selector like this:

@Component({
  moduleId: module.id,
  selector: '[sidebar-menu]',
  ...
})

And call it as a directive inside a div, a li or any DOM element for that matter.

<ul class="menu-items" sidebar-menu></ul>

This way, I can still use the styling from my Themeforest template and use components. I figured that it broke because normally I would have something like this:

<div class="parent-class">
    <div class="child-class">
        ... styles applied to ".parent-class.child-class"
    </div>
</div>

And with components, I got something like this:

<div class="parent-class">
    <sidebar-menu>
        <div class="child-class">
            ... CSS can't find ".parent-class.child-class" anymore, as it has a sidebar-menu element in the middle!
        </div>
    </sidebar-menu>
</div>

With the workaround, you end up with this:

<div class="parent-class">
    <div class="child-class" sidebar-menu>
        ... CSS can still find ".parent-class.child-class", all good!
    </div>
</div>

Hopefully this will help someone. Thanks for your answers!

Angular2 Sub Component Break CSS Relationship