feat(common): accept object map for HttpClient headers & params (#18490)

Today, constructing a new GET request with headers looks like:

const headers = new HttpHeaders({
  'My-Header': 'header value',
});
http.get('/url', {headers}).subscribe(...);

This indirection is unnecessary. It'd be more ergonomic to write:

http.get('/url', {headers: {'My-Header': 'header value'}}).subscribe(...);

This commit allows that new syntax, both for HttpHeaders and HttpParams.
In the HttpParams case it also allows construction of HttpParams with a map.

PR Close #18490

packages/common/http/src/params.ts

@@ -89,10 +89,24 @@ export class HttpParams {
 
   constructor(options: {
     fromString?: string,
+    fromObject?: {[param: string]: string | string[]},
     encoder?: HttpParameterCodec,
   } = {}) {
     this.encoder = options.encoder || new HttpUrlEncodingCodec();
-    this.map = !!options.fromString ? paramParser(options.fromString, this.encoder) : null;
+    if (!!options.fromString) {
+      if (!!options.fromObject) {
+        throw new Error(`Cannot specify both fromString and fromObject.`);
+      }
+      this.map = paramParser(options.fromString, this.encoder);
+    } else if (!!options.fromObject) {
+      this.map = new Map<string, string[]>();
+      Object.keys(options.fromObject).forEach(key => {
+        const value = (options.fromObject as any)[key];
+        this.map !.set(key, Array.isArray(value) ? value : [value]);
+      });
+    } else {
+      this.map = null;
+    }
   }
 
   /**

packages/common/http/test/client_spec.ts

@@ -39,6 +39,16 @@ export function main() {
         });
         backend.expectOne('/test').flush('hello world');
       });
+      it('with headers', (done: DoneFn) => {
+        client.get('/test', {headers: {'X-Option': 'true'}}).subscribe(() => done());
+        const req = backend.expectOne('/test');
+        expect(req.request.headers.get('X-Option')).toEqual('true');
+        req.flush({});
+      });
+      it('with params', (done: DoneFn) => {
+        client.get('/test', {params: {'test': 'true'}}).subscribe(() => done());
+        backend.expectOne('/test?test=true').flush({});
+      });
       it('for an arraybuffer', (done: DoneFn) => {
         const body = new ArrayBuffer(4);
         client.get('/test', {responseType: 'arraybuffer'}).subscribe(res => {
@@ -69,6 +79,7 @@ export function main() {
       it('that returns a stream of events', (done: DoneFn) => {
         client.get('/test', {observe: 'events'}).toArray().toPromise().then(events => {
           expect(events.length).toBe(2);
+          let x = HttpResponse;
           expect(events[0].type).toBe(HttpEventType.Sent);
           expect(events[1].type).toBe(HttpEventType.Response);
           expect(events[1] instanceof HttpResponse).toBeTruthy();