`Where can I find resources on connecting components in Angular 2?`

Question

`Where can I find resources on connecting components in Angular 2?`

Exploring ways to enhance my website, I am considering allowing users to customize the theme according to their preferences. To start off, I decided to introduce a 'Dark theme' option. In order to implement this feature effectively, I am working on integrating the dark theme separately. https://i.sstatic.net/BiWBZ.png

The screenshot above showcases a modal window where users can select the dark theme and modify the color scheme of the site. This interactive component is referred to as customize.component.html. Meanwhile, in the backdrop, you will find the display of the website results denoted by 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 code snippet demonstrates both components. Additionally, I have created a file named theme.js where the theme processing functionality is defined. However, I am encountering issues with the execution of the code.

theme.js

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

I am seeking guidance on how to access elements with an id from results.component.ts. I am currently facing challenges in implementing this specific feature. Your assistance would be greatly appreciated! Thank you!

NOTE - Angular Material 2 is not being utilized in my project, hence requiring an alternative method for enabling users to customize themes without Angular Material 2.

javascript html css angular

Answer 1

Answer №1

When working with Angular 2, it is recommended to steer clear of plain JavaScript linked through a link tag.

In your customise.component.ts file, ensure to include your darkTheme function. It's important to be able to use this function in other components as well. One way to achieve this is by using a service to store the data.

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">×</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>

Take note of how the click binding is implemented: (click)="darkTheme()". You can then inject the same ThemeService into your ResultsComponent and utilize the themeColor field accordingly.

For instance: results.component.ts

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

results.component.html

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

This offers a potential solution to the issue, though in practical scenarios, using CSS class names may be preferred over colors.

Update

An example demonstrating the implementation of theming can be found at the following link:

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

In general, utilizing LESS or SASS can greatly simplify the definition of your themes.

Answer 2

When working with Angular 2, it is recommended to steer clear of plain JavaScript linked through a link tag.

In your customise.component.ts file, ensure to include your darkTheme function. It's important to be able to use this function in other components as well. One way to achieve this is by using a service to store the data.

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">×</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>

Take note of how the click binding is implemented: (click)="darkTheme()". You can then inject the same ThemeService into your ResultsComponent and utilize the themeColor field accordingly.

For instance: results.component.ts

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

results.component.html

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

This offers a potential solution to the issue, though in practical scenarios, using CSS class names may be preferred over colors.

Update

An example demonstrating the implementation of theming can be found at the following link:

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

In general, utilizing LESS or SASS can greatly simplify the definition of your themes.

`Where can I find resources on connecting components in Angular 2?`

Answer №1

Similar questions

Express/NodeJS encountering a CORS problem, causing services to be inaccessible in Internet Explorer

How can I restrict Material UI TextFields with input type = file to only allow pdf files?

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

The functionality of AngularJS routing is malfunctioning

Centering loaders within elements of an unordered list

Is there a way to carry out tests on keydown events within Jasmine by specifying the keyCode within an Angular2+

Retrieve data from specified <td> element in an ASP.NET MVC application

Accessing the Bootstrap4 Carousel control tabbing is hindered as the focus does not shift to the carousel-caption div when using the tab key on the

Should I use a single directive with ng-if statements in AngularJS, or opt for two separate directives?

Adjusting the left and right margins within a Bootstrap row nested inside a card component

Twitter Bootstrap 3 - Change column order for extra small screens

Running a JQuery function within an Angular expression

Ensure that the content fills the entire height of the container and include a scrollbar

The jQuery UI Sortable functions are being triggered at lightning speed

Is the Vuex mutation properly formatted?

Exploring the creation of an Angular service that utilizes HttpClient for making GET requests, with a focus on the different

How to calculate the number of distinct elements using jQuery

Deactivating upcoming weeks according to the year in Angular 8

Spacing between letters on a canvas element

I am experiencing difficulty with the color of my progress bar in Firefox