How to get data from service into class and send it to the html component-CodePudding

So I am new to angular and trying to build a small project.

How to get data from a service into class and send it to the html component?

// service.groups.ts

export class GroupService {
    public getAll(): void {
       return // httpService call...works!
    }
}

// groups.class.ts

import {GroupService} from '@core/services/group/group.service';

export class {
    protected constructor(private groupService: GroupService);

    public get groupData(): string {

        let data = this.groupService.getAll();

        // some extra filtering comes here

        return data;
    }
}

// wrapper.component.html

<wrapper[group]="groupData"></wrapper>

// wrapper.component.ts

export class WrapperComponent {
    @Input()
    public group: string;
}

// wrapper.html

<div>{{ group }}</div>//not working

CodePudding user response：

You could use async pipe since data you get is asynchronous. You can use it your .html file like this:

<wrapper[group]="groupData | async"></wrapper>

One important note is that async subscribes automatically and is responsible for firing your http call. Also it automatically unsubscribes so that you don't need to care for explicitly calling .unsubscribe() inside ngOnDestroy lifecycle method in your component .ts.

Read more abou it on: https://angular.io/api/common/AsyncPipe

CodePudding user response：

First of all you should never make a get request to your api in get method. (If all other components are properly written changing this should fix your problem) This way you will call it infinitely until the program crashes. So instead of calling it this way:

<wrapper [group]="groupData"></wrapper>

You should set data in ngOnInit method or constructor or any other place that you want to, but make sure it won't be method that is called in get's way.

Second, your class is not a component. Properly written component looks like this:

@Component({
  selector: 'app-some-component',
  templateUrl: 'some.component.html',
  styleUrls: ['some.component.scss']
})
export class SomeComponent implements OnInit  {
    groupData: string = "";

    constructor(private groupService: GroupService) {
    }
   
    ngOnInit() {
        groupData = getGroupData();
    }

    public getGroupData(): string {
        return this.groupService.getAll();
    }
}

Please note that here you have component decorator. Selector and styleUrls is not required, but nonetheless in most cases you will use it. TemplateUrl can be replaced with template.

Similarly, second component is missing "@Component" decorator.

Now if you add

<wrapper [group]="groupData"></wrapper>

In some.component.html, then you should see string that is returned by getGroupData() method if GroupService class is properly written.

Let me know if this helps, and if not please write additional information (e.g about GroupService class, whole components with html and decorators)

CodePudding user response：

public group: string; change it to observable type