CODEWITHSUNDEEP
javascriptangular
user7776690
user7776690

Reputation:

Javascript Angular using code from different .ts file

I'm working on an Angular4 project and I have created a filter on my app.component.ts which I'm currently using on my app.component.html.

<button (click)="filterBy('cars')">Cars</button>

This works fine in this file by I want to use this same filter on my nav.component.html but I'd like to avoid recreating the filter code again on the nav.component.ts.

Is there a way of using this filter on my nav.component.html from app.component.ts ?

Upvotes: 0

Views: 62

Answers (3)

Rahul Singh
Rahul Singh

Reputation: 19622

@Injectable()
export class Service{
  //create all the logic here for all the things you want to be shared across compponents
}

call this in the component you want to use like 

import {Service} from "../shared/service";

@Component({
  selector: 'app-angular4'
})
export class Angular4Component implements OnInit {
     constructor(private service:Service) {

 // resuse all the methods
}

Upvotes: 1

Lazyexpert
Lazyexpert

Reputation: 3154

You can create service, for example "filter.service.ts". Good thing in service is - it will create only one instance. So you use less memory, and app is faster. Then - you can include it to the parent module:

import { FilterService } from "some/filter.service.ts";
@NgModule({
  declarations: [ AppComponent, NavComponent],
  providers: [ FilterService ]
})
export class MyModule { }

And use in your components like this:

import { FilterService } from "some/filter.service.ts";

constructor(filter: FilterService) {
  this.filter = filter;
}

And then your html:

<button (click)="filter.filterBy('cars')">Cars</button>

Upvotes: 1

Harrisss
Harrisss

Reputation: 363

Migrate your created filter code in some new .ts file. Import this file in your app.component and other components by using import {ClassName} from file.ts syntax and then easily implement it in your component html code

Upvotes: 2

Related Questions