How css is getting applied ?

[abhishekit29]

I am using angular2. While pressing send messages are displayed with css applied ony if I I am putting them in app.css not in connect-chat.css

@Component({
  moduleId: module.id,
  selector: "connect",
  templateUrl: './connect.component.html',
  styleUrls: ['./connect.component.css', './connect-chat.css']
})

ngViewAfterInit() {
         let chatView =  new ChatViewModule.ChatView();
        this._changeDetectionRef.detectChanges();
        this.page.bindingContext = ViewModel.createViewModel(); 
        chatView.notifyOnSendMessageTap((eventData: ChatViewModule.SendMessageTappedEventData) => {
        // add a chat message
        eventData.object.appendMessages({            
            date: this.getTime(),
            isRight: true,
            image: 'http://api.adorable.io/avatars/50/${new Date().getSeconds()}.png',
            message: eventData.message,    
        });
        eventData.resetMessage();
        eventData.scrollToBottom();
        eventData.focusTextField();
    });
    chatView.focusMessageField(); 
    this.page.content = chatView;
}

[leocaseiro]

Perhaps if you remove encapsulation with encapsulation: ViewEncapsulation.None, it should work.

Eq:

import { Component, AfterViewInit, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: "connect",
  templateUrl: './connect.component.html',
  styleUrls: ['./connect.component.css', './connect-chat.css'],
  encapsulation: ViewEncapsulation.None
})

Read more: https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html#view-encapsulation-types

PS: I believe it should be ngAfterViewInit