Same Code in Multiple Components Angular 6

angular 6 multiple components on one page
angular same component multiple times
multiple html files in one component angular
combining multiple angular applications into a single one
angular multiple components same selector
angular 6 component with multiple templates
angular component with multiple templates
angular multiple instances of same component

I have a couple of components which are doing the same job. Everyone makes the same API call only with a diffrent parameter:

this.http.get('url' + parameter).subscribe((data: Array<any>) => {
   //some state dispatches and other stuff
   return response;
});

I don´t wants to write the same code in every component for reasons. In Java for example I use superclasses for this case. In Angular services are sufficient most of the time. But not in this case. I tried to write a new class:

export class Content {
   constructor(private http: HttpClient) { }
   getContent() {
     this.http.get('url' + parameter).subscribe((data: Array<any>) => {
       //some state dispatches and other stuff
       return response;
     });      
   }
}

Now i can initialize this class in every component and it works:

export class MyComponent {
  constructor(private http: HttpClient) { }
  toggle() {
    new Content(http);
  }
}

The issue is that i have to use the constructer where I injected the httpClient. I don´t want that because I have to pass more than httpClient to this methode (which are not relevant for the issue). So is that the best practice and if yes how can I use httpClient without passing it?

Multiple Components - ts - TUTORIAL, Add a file named hero-detail.component.ts to the app/ folder. Putting square brackets around the hero property, to the left of the equal sign (=), makes it the  Angular 6 App Structure With Multiple Modules 29 June 2018 Web Zahid Since I couldn’t find any resources on Angular 5 app structure with multiple modules, I decided that whilst rebuilding an AngularJS app, I would implement a multiple-module architecture and document it.

Just put @Injectable before create the class of the service, and then you can inject the service inside the providers of app.module.ts

@Injectable()
export class Service {
  constructor(
      private http: HttpClient,
  ) {}

  getContent() {
     this.http.get('url' + parameter).subscribe((data: Array<any>) => {
       //some state dispatches and other stuff
     });      
   }
}

And then you can use it inside the constructor of your other component importing the service before :)

constructor(private service: Service) { }

How To Create Angular Service And Access It In Multiple Components, [/code]. This command will a create file named common.service.ts under the I Related: How To Build Dynamic Components In Angular 6. Let us create angular app with multiple components. In our case those will be AppComponent and BikeInfoComponent. AppComponent is created by default when we create new angular app. Create BikeInfoComponent as done in previous article. Create Bike class that acts as bike object.

Create a Service. Import the service in any component that you need, and inside the Service import the HttpClient.

Here are the docs.

How to Share Angular Components Between Projects and Apps, When building multiple Angular projects or applications, components can be shared and reused between them, to speed Share reusable code components as a team · Bit You can do the same for your team's components, to collaborate and build apps. 6 Concepts to Master to be an Angular Architect. Add a file named hero-detail.component.ts to the app/ folder. This file will hold the new HeroDetailComponent. The file and component names follow the standard described in the Angular style guide. The component class name should be written in upper camel case and end in the word "Component". The hero detail component class is HeroDetailComponent.

Create a service with httpClient. use a function which returns a promise. inside this function use http request. In your component just get the instance of the service and execute whatever you want after promise returns a value

service.ts

 export class ContentService {
   constructor(private http: HttpClient) { }
   getContent(): Promise<any> {
     this.http.get('url' + parameter).subscribe((data: Array<any>) => {
       return new Promise(resolve => resolve('whatever'));
     });      
   }
}

component.ts

constrctor (private classService: ClassService) {
   classService.getContent()
   .then(data => 'do whatever you want with tha data');
}

Combining Multiple Angular Applications into a Single One, app1: The source code for your first custom sub application; app1/app: The This is the default Angular application component, but our title specifies that we are Since all the applications use the same port, you can't run them at the same​  Learning Angular? Check out the full Angular 9 Course. Data sharing is an essential concept to understand before diving into your first Angular project. In this lesson, I provide four different methods for sharing data between Angular components.

Same Code in Multiple Components Angular 6 - angular - html, to write the same code in every component for reasons. In Java for example I use superclasses for this case. In Angular services are sufficient most of the time. We cannot share a component to different modules by just importing that component inside all the modules, because Angular 2 doesn’t allow us to import single component to different modules, if you try to do this then Angular will throw an error: Type X(component) is part of the declarations of 2 modules

Clean Code Checklist in Angular ✔️, Angular has rapidly grown to become one of the most popular frameworks for building This comes in handy when you don't want to contaminate your components with the same code. When we find our self in situations where multiple HTML elements share the same behavior (e.g. May 6 · 8 min read  The footer- and header folders contains the global component-files, statically used across the entire application. These files will appear on every page in the application. |-- header |-- header.component.ts|html|scss|spec.ts |-- footer |-- footer.component.ts|html|scss|spec.ts. The http folder handles stuff like http calls from our application.

Best practices for a clean and performant Angular application, I have been working on a large scale Angular application at Trade Me, New Zealand for a couple of years now. Avoid subscribing to observables from components and instead subscribe to the 6) Clean up subscriptions Having the same code in multiple places means that if we want to make a change  This is the default Angular application component, but our title specifies that we are running the app1 code. You can run the second sub project like this: ng serve –-project=app2

Comments
  • If you want to have like 10 components that do the same thing why not using a ngFor in the html? Like <div *ngFor="..."><my-component></my-component></div>
  • Because every component manipulates the data diffrent. Only the request is the same
  • Why not use return this.http.get(url).pipe(map(data) => {// some common stuff here}); in your service and then let the components do their own processing on it from that point on? That is a very common approach to this.
  • Your reasoning for "not wanting to inject the HttpClient" is unclear. Can you please explain further? Are you aware that you can inject multiple things in a constructor?
  • If i get you right i don´t expor the data, i export the logik to manipulate the data?
  • @NicoSchuck - the service executes common processing but returns that as an observable. The component can then subscribe, get that result, and do whatever else needed on that resulting data.
  • @NicoSchuck - see also How do I return the response from an asynchronous call? which has examples of returning rxjs observables.
  • awesome thats exactly what i need
  • Thats the way I´m using services. The issue is that I need a response from getContent(). i change my Question to clearify that
  • Thank you for you help. unfortunately it doesnt works. Because if I declare the method as Promise, a return outside of the http request is required. If I add this return, I will always get this response.