Angular observable array, populated by an http request and manually added data

@1: GET request to a backend API, returns a JSON array of items, and display that array in a component as a data list

let's call this one ComponentA:

export class ComponentA {        
    arrayOfItems:Type[];
    constructor(private http:HttpClient) {}

    getDataFromAPI():Observable<Type[]> {
        this.http.get<Type[]>('api-get-url')
            .subscribe(
                (items) => {
                    //print them if you want;console.log('response from the api', items);
                    this.arrayOfItems = items;
                }
            )
    }
}

@2.1: Allow a second component to POST new items to the backend (omitted a part of the question on purpose)

export class ComponentB {  
    // let's assume this array is already populated
    // via you 2-way bindings or whatever means 
    newItems:Type[];
    constructor(private http:HttpClient) {}

    postDataToAPI():Observable<any> {
        this.http.post('api-post-url', this.newItem)
            .subscribe(
                response => console.log('response from the api', response);
            )
    }
}

@2.2 and also add that item to the list of items above

Everything ^ was straightforward, but now you gotta stop and think: I have something 'here' and something 'there'. How can I ... connect them? Ha! Connect! So I need some sort of mechanism to connect the 2 components. What do you do? You use a service! But a service whose purpose is to store a shared data set. You can call it DataStoreService.

Let's (re)write some code:

@Injectable()
export class DataStoreService() {
    items:Type[] = [];
    constructor(private http:HttpClient) {}

    getDataFromTheAPI():Observable<Type[]> {
            this.http.get<Type[]>('api-get-url')
                .subscribe(items => this.items = items)
    }

    postDataToTheAPI(itemToAdd:Type):Observable<any> {
            this.http.post('api-post-url', itemsToAdd)
                .subscribe(
                    (response) => {
                        // check if all is good, and add it to the 'items' array
                        addItem(itemToAdd);
                    }
            }
        )
    }

    getItems() {
        return this.items;
    }

    addItem(item:Type) {
        this.items.push(item);
    }
}

Now, your Component A changes to:

export class ComponentA implements OnInit{
    constructor(private dataStoreService: DataStoreService) {}

    ngOnInit(): void {
        this.dataStoreService.getDataFromTheAPI(); 
        // ^ will request the data from the API and store it 
        // inside the service
    }

    // and here you get a reference to that data
    get itemsReferenceFromService() {
        return this.jobsStoreService.getJobsArray();
    }
}

And ComponentB to:

export class ComponentB {
    newItem:Type;
    constructor(private dataStoreService: DataStoreService) {}

    // when you do this, if successful, addItem method
    // will also be called that will 'and also add that item to the list of items above'; as componentA only has a reference to the data in 
    // the service, the new item will be displayed it it
    this.dataStoreService.postDataToTheAPI(newItem);
}

Hope this answers your question. If you have any other doubts, say it loud. Info like urls were omitted.

A further improvement is to have another service that only handles the API calls, and keep the DataService clean just for storing purposes. That will ease testing.

Be aware that the lifespan of any Service/Component in angular is up untill the end user refreshed the page. The service described is not a persistence mechanism.