How to link elements in angular 2?

Question

I'm trying to build a feature for my website in which I'm providing user to change theme of the site according to them. Just getting started, I thought to keep 'Dark theme'. So, I'm trying to implement the dark theme separately.

As you can see above in the screenshot, a modal opens up in which a user can click on dark theme and change the colors of site. This modal component is called customize.component.html . In the background, you can see the results of website. I call this results.component.html .

customize.component.ts

<link type="text/javascript" href="../../assets/themes/theme.js" id="theme">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <!-- Start ignoring HTMLLintBear -->
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <!-- Stop ignoring HTMLLintBear -->
      <h2 class="modal-title" id="my-modal-label">Customization</h2>
    </div>
    <div class="modal-body">
      <button class="theme-button" id="dark" onclick="darkTheme(title)">Dark Theme</button>
    </div>
  </div>
</div>

results.component.ts

<!-- Customization modal-box -->
<link type="text/javascript" href="../../assets/themes/theme.js">
<div class="modal fade" id="customization" tabindex="-1" role="dialog" aria-labelledby="myModallabel">
    <app-customize></app-customize>
</div>

This is my code snippet for both the components. I have created another file name theme.js in where theme-process will work. But my code is not working.

theme.js

 function darkTheme(id) {
    var el = document.getElementById(id);
    el.style.color = "red";
}

How should I take element with an id from results.component.ts ? I'm not able to implement the feature. It would be great if someone can help me out! Thanks!

NOTE - I'm not using Angular Material 2 in my project. So, I have to implement the feature of providing themes to user without using Angular Material 2.

This can helps you: https://stackoverflow.com/questions/38944725/how-to-get-dom-element-in-angular-2 — John Doe, May 23 '17 at 19:56

Zenon Motyka · Accepted Answer · 2017-05-24T18:51:51.253

When you work with Angular 2, it is a good practice to avoid plain JavaScript, referenced with a link tag.

Your customise.component.ts file should contain your darkTheme function. I strongly believe that you want to share your selected colour with other components = use it somewhere else. One of the methods is to use the service and store the data in it.

export class CustomiseComponent { 
    constructor(
        private themeService: ThemeService
    ) { 
    }

    darkTheme() {
        this.themeService.themeColor = 'red';
    }
}

@Injectable()
export class ThemeService{
    public themeColor: string;
}

customise.component.html

<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <!-- Start ignoring HTMLLintBear -->
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <!-- Stop ignoring HTMLLintBear -->
      <h2 class="modal-title" id="my-modal-label">Customization</h2>
    </div>
    <div class="modal-body">
      <button class="theme-button" id="dark" (click)="darkTheme()">Dark Theme</button>
    </div>
  </div>
</div>

Notice the way that the click binding is done: (click)="darkTheme()". Next, you can inject the same ThemeService to your ResultsComponent and use the themeColor field as you wish.

For example: results.component.ts

export class ResultsComponent {
    constructor(
        public themeService: ThemeService
    ) {
    }
}

results.component.html

<label [style.color]="themeService.themeColor">Your colorful text</label>

This presents a potential solution for the problem but if it comes to a real case, it could be better to use a CSS class names instead of colours.

Update

The example showing how theming can be implemented is available at the following link:

https://embed.plnkr.co/PX1kcJAbNmBxTZmAzsiS/

In general, it is a good idea to use LESS or SASS as it will significantly simplify your theme definition.

There is one more thing. I would like to change the background color and font-family too. So I have created a css file. How should I do it ? Can you please expand your answer related to CSS class names one? It would be really helpful. Thanks! — Harshit, May 24 '17 at 06:40
Harshit, have a look at the response update for a CSS-driven theming. — Zenon Motyka, May 25 '17 at 05:20

How to link elements in angular 2?

1 Answers1