I am developing an Angular app that has multiple language support. The 
key-value collection for the active language is loaded from API by a 
dedicated TextBank service.

I am struggling with an architecture decision, don't want to discover I've 
chosen the wrong way when the project is already well developed. The 
decision at hand is how to insert the language-dependent text snippets in 
the templates.

The obvious way is to inject the service into component and then use 
template expressions to insert the text. The service knows from its config 
the active language and can serve the respective text string:

import { Component } from '@angular/core';
import { TextBankService } from '../services';

@Component({
  selector: 'my-component',
  template: `
    <div>
      {{ txb.text("myKey") }}
    </div>
  `
})
export class MyComponent {
  constructor(

    private txb: TextBankService
  ) {}
}


However, I'd like to give some users a special permission to edit the 
language-dependent text snippets. I think that in-place editing would be 
the most natural in most cases. So, the text snippet references in the 
templates could be a dedicated component:

import { Component } from '@angular/core';

import { TextBankComponent } from '../ui';


@Component({
  selector: 'my-component',
  template: `
    <div>
      <txb key="myKey"/>
    </div>
  `
})
export class MyComponent {
  constructor(
  ) {}
}

The TextBankComponent would use TextBankService to retrieve the required 
text strings. The TextBankComponent would also be aware of the user's 
special permission and allow in-place editing of the instances all over the 
page. The component code would seamlessly save the edited string values 
using API.

>From the functionality point of view, the dedicated component approach has 
more features than using simple template expression. What I am afraid of, 
is that choosing the dedicated component way could be too much a load on 
the browser, when there are hundred or more instances on the page. That 
would result in slow page loading and memory hogging.

So, thus the question in subject: what is the reasonable maximum number of 
components on a page? Of course, depends on the component complexity, 
user's computer power, memory size, etc, etc. But perhaps there's some good 
rule of thumb.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to