CODEWITHSUNDEEP
htmlcssangular
user824624
user824624

Reputation: 8056

loading html content successfully but css style is not applied in angular2?

I am using angular2 to load a external html into the component, the html content is successfully loaded into the component but css style in the html file is not applied yet.

Here is my component

@Component({
  selector: 'faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.css']
})
export class TestComponent implements OnInit {

  constructor(
              private http:Http) { }

  template;

  ngOnInit() {
    var self = this;
    var href = "/assets/faq.html";
    this.http.get('./assets/test.html')
               .map(res =>res.text())
               .subscribe(
                     (res: any) =>{
                   this.template = res;
               });
  }
}

scss file

.accordion-item a {
    font-family: 'Montserrat' !important;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    padding: 1rem 4.5rem 1rem 1rem;
    color: #373c46;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}

.accordion-item a.active {
    color: #4747d1;
    /* border-bottom: 1px solid #4747d1; */
}

.accordion-item .content {
    //display: none;
    padding: 1rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    color: #868692;
}

faq.html

<div class="container">
          <div class="f-intro accordion-section">
            <div class="col-md-10 col-md-offset-1">
              <h1 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">FAQ</h1>
              <div class="accordion">
            <div [innerHTML]="template" class="accordion"> </div>
          </div>
        </div>
</div>

external html

  <div class="accordion-item">
    <a class=""> I read this section, but i still have questions.. </a>
    <div class="content" >
      <p id="txt_lib-rep-bod">We invite you to our Slack chat (link in main menu). We cant be there 24/7 but we will respond your question there ASAP! </p>
    </div>
  </div>

Upvotes: 0

Views: 50

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Since you used Emulated ViewEncapsulation(default) option which adds extra unique attribute to component style and DOM elements. So when you want to apply some styling on specific element that resides in current component HTML or its descendant tree. Then you could use /deep/ before CSS style Rule.

But sooner /deep/, >>> and ::ng-deep option gonna drop. Angular team recommend to use ::ng-deep so use that instead.

::ng-deep .accordion-item a {
    /*CSS Rule as is*/
}

::ng-deep .accordion-item a.active {
    /*CSS Rule as is*/
}

::ng-deep .accordion-item .content {
    /*CSS Rule as is*/
}

Upvotes: 1

Related Questions