Combine and modify an object coming from a different component

Question

Combine and modify an object coming from a different component

Recently, I developed a customized viewer component specifically designed to showcase song sheets. One of my main objectives is to give users the ability to adjust font settings and other display preferences at their discretion. In order to accomplish this task effectively, I introduced a new view-customization component that integrates the font-customization component into its functionality.

https://i.sstatic.net/twK75.png

My current challenge involves transferring these customization settings from the view-customization component to the actual viewer component in an efficient manner. While I'm already utilizing @Input() and @Output() for data transfer between components, the sheer volume of information to be transferred (such as LyricsBold, LyricsItalic, LyricsColor, ChordsBold, ChordsItalic, etc.) makes creating individual inputs impractical. As a solution, I devised a unified object called ViewSettings to encapsulate all relevant settings. However, I am unsure about the best approach to send this object to the viewer component and update it accordingly whenever a property within ViewSettings changes.

I am seeking guidance on the most optimal method to achieve this seamless communication between components. Any insights or recommendations would be greatly appreciated!

angular typescript binding

Answer 1

Answer №1

If you want to streamline your styling process, consider creating a comprehensive Model with all the necessary parameters and then exporting it as GlobalModel.

export class StyleModel{
    public LyricsBold: number
    public LyricsItalic: string
    public LyricsColor: string
}
export const GlobalStyleModel = new StyleModel()

To use this model in your project, simply import it like so:

import { GlobalStyleModel } from 'src/models/style.model'

You can also define custom types to provide more specific information without the need for constant translation efforts.

In your component where you handle styles, make use of the Global Model to easily modify values:

GlobalStyleModel.LyricsBold = 700

Alternatively, you could explore using a service to receive data and subscribe to it, though this may not be the most practical solution. For user-friendly applications, leveraging cookies is recommended to prevent data loss upon reloading.

Answer 2

If you want to streamline your styling process, consider creating a comprehensive Model with all the necessary parameters and then exporting it as GlobalModel.

export class StyleModel{
    public LyricsBold: number
    public LyricsItalic: string
    public LyricsColor: string
}
export const GlobalStyleModel = new StyleModel()

To use this model in your project, simply import it like so:

import { GlobalStyleModel } from 'src/models/style.model'

You can also define custom types to provide more specific information without the need for constant translation efforts.

In your component where you handle styles, make use of the Global Model to easily modify values:

GlobalStyleModel.LyricsBold = 700

Alternatively, you could explore using a service to receive data and subscribe to it, though this may not be the most practical solution. For user-friendly applications, leveraging cookies is recommended to prevent data loss upon reloading.

Combine and modify an object coming from a different component

Answer №1

Similar questions

The parameter of type 'never' cannot be assigned with the argument of type 'number | boolean | undefined'

Preventing duplicate actions on a Subject with Angular 7's rxjs debounceTime operator

Having trouble using the 'in' operator to search for 'Symbol(StrapiCustomCoreController)' while transitioning Strapi to TypeScript

Angula 5 presents a glitch in its functionality where the on click events fail

Angular throwing optimization bailout warning when importing jsPDF

Title Enigma of the Ellipsis

Showcase pictures within an angular smart table

Troubleshooting problem with iPhone X responsiveness

Troubleshooting TypeScript errors related to ReactNode post-upgrade to Create React App v5

How to implement a timeout feature in JavaScript/TypeScript for cloud functions

Type of JavaScript map object

React 18 Fragment expressing concern about an excessive amount of offspring

The issue with the antd Input component's onChange event not updating state correctly when using a list fetched from an axios get request in a React

Typescript: Implementing the 'types' property in a function returned from React.forwardRef

Exploring the Various Path Options in Angular 2 Routing

Building a dynamic form in Angular with nested JSON data for enhanced reactivity

What could be causing the lack of updates in my shared service across all components?

Having trouble with the yAxis in HighCharts on Angular 8? FireFox and IE causing issues?

Ways to verify the existence and non-empty status of a directory?

Trigger the D3 component to re-render in React after a state change occurs in the parent component