Implement an Angular component with a basic functionality of Social-App. The app will enable user to view 5 friends with the highest mutual friends number ordered by the number of likes (from the highest to lowest), display current like count of each friend, give a like to each friend and handle both successful an failing API requests. 1. The outermost tag of the component is a div with class app-wrapper. 2. There is an available import of SocialService Angular Service named SocialService that can be injected in the constructor. It has following methods available: - getFriends - accepts no parameters, and returns: - in case of a success, an HTTP observable with status code 200 with list of friends under a parameter friends in the response's body property in case of a success. - you have to assume - just as in real world - it might sometimes return 500 status code indicating some failure on server side. Friend is of following type: type Friend ={ name: string; likeCount: number; \} - likeFriend - accepts friends name as param and indicates that the particular friend has been given like and returns: - in case of a success, HTTP observable with the updated like count and the status code 200. The response's body property contains the updated like count in the parameter likeCount. - you have to assume - just as in real world - it might sometimes return 500 status code indicating some failure on server side. However in your Preview Tab the beforementioned methods always return 200. 3. Initially, the div with class app-wrapper will contain nothing inside of it, and your task is to create the However in your Preview Tab the beforementioned methods always return 200. 3. Initially, the div with class app-wrapper will contain nothing inside of it, and your task is to create the code that will display the app there. 4. Add an h1 header inside of the div with a text My Friends inside of it. 5. Display a list of 5 friends with the highest mutual friends count. The response from getFriends method can contain any number of friends (greater or equal than 5), and your task is to display only five. The friends should be displayed in an order from the highest like count to the lowest. They should be displayed inside ul list: - each li should correspond to one friend. It should have an attribute data-test-id in a format li\{lowercased-name and a name of the friend as an inner text inside the span tag inside. For example if the user's name is John the data-test-id param for corresponding li tag should be li-john. - each li tag should also contain inside of it a button with a data-test-id set to button-\{lowercasedname \}. As for the li data-test-id, the button for name John should have a data-test-id set to buttonjohn. Clicking the button causes the method likeFriend to be invoked, with a friendName parameter set to John. The button should contain inside of it a text in form Like . The like count is accessible from the getFriends method as mentioned before. So for example for friend with 25 like count, the text inside button should be Like 25. - After clicking the like-count button, the value inside of div should be updated to the value returned from the likeFriend method (in case the request has been successful). Bear in mind, that the likeCount value does not have to be incremented exactly by one after likeFriend request. The button should be disabled after the API request for liking the friend, but only in case the API request was successful. The friends order in the list should be updated in case, the updated like count has become larger than some other's friend likeCount. In case the new like count value is equal to some other friend's like count, preserve the original sort order. 6. When making a request, the request might unexpectedly fail with status code 500 . The logic should correctly handle that: - when the request with getFriends fails, we should display a h3 element and an inner message Fetching friends has failed. - when the request with likefriend fails, we should display a h3 element and an inner message Liking friend has failed. Bear in mind that there should be a mutual h3 tag for both errors, so you should have only one h3 tag for error displaying. Assumptions - In case you want to test App behaviour in the Preview for failing requests use: - failingGetFriends - method available only for the preview, accepts no parameters and always returns HTTP Error Response observable 500 status code. You can use it to test the behaviour of your code - when the real getFriends method would fail. - failingLikeFriend - method available only for the preview, accepts friends name and always returns HTTP Error Response observable 500 status code. You can use it to test the behaviour of your code - when the real likeFriend method would fail. - Design/styling is not assessed and will not affect the score. You should focus only on implementing the requirements. - Only the functionalities described in the Requirements section will be assessed, this task does not assess any potential memory leaks caused by not unsubscribing. - You can use console. log for debugging purposes via your browser's developer tools. - The imports allowed are: @angular/core (v10.1.0), rxjs (v6.6.0), rxjs/operators (v6.6.0) and ./ socia1. They are at the top of the starting code. Environment - angular/core (v10.1.0) - rxjs (v6.6.0) - rxjs/operators (v6.6.0) - node 14 Example Environment - angular/core (v10.1.0) - rxjs (v6.6.0) - rxjs/operators (v6.6.0) - node 14 Example Use the animation below as a reference for your solution. My Friends - Sophie - Elon - Mary - John - Mia