Skip to main content

Localization in angular4 by fetching data from server using VS2017

Localization in angular4 by fetching data from server using VS2017

Localization  in angular4 by fetching data from server using VS2017




1,This is my webapi controller from where the data for localization is fetched


//This is our webApi COntroller
 // GET: api/local/5
   [HttpGet, Route("api/local/{name}")]
        public IDictionary Get(string name)
        {
           
                Dictionary dict = new Dictionary();
                dict.Add("user01", "Nombre");//Name
                dict.Add("user02", "Nombre del Padre");//Father Name
                dict.Add("user03", "Direccion postal");//Postal Address
                return dict.ToDictionary(p => p.Key, p => p.Value);

        }


2,In our template url file, we will be giving the key of the dictionary object and covering it with a function which will fetch the value from the key  from the component


                    {{name("user01")}}
   


3,In our component  we have to write a get method to fetch the localization values from webapi controller



My Component.ts





//localisation-Json result from the service is passed to a html localstorage where our value is stored
and is used by our html page
        this.dataService.getlocal()
            .subscribe((item: any[]) => {
                if (item != null || item != undefined) {
                 
                    if (localStorage.getItem("localizationAray") != null) {
                        localStorage.removeItem("localizationAray");
                    }
                    localStorage.setItem("localizationAray", JSON.stringify(item));
                }
            });

    }

  //localization -This method is call from template url to get value fro  key . We will fetch value from the local storage in html5
    name(value: string) {
       
        var retVal = localStorage.getItem("localizationAray");
        var OrgVal = JSON.parse(retVal);
        if (OrgVal != null || OrgVal != undefined) {

            retVal = OrgVal[value];
        }

        return retVal;
    }



My Service.ts

//local- This service fetch dictionary value from webApi controller
    getlocal() {
        var retVal = localStorage.getItem("userlang").toString();
      //  return this.http.get('api/local/?name=${retVal}')
        //'"' + retVal + '"'
        return this.http.get('api/local/' + retVal )
            .map((res: Response) => res.json());
    }


Please free to comment under for any further clarification.



Comments

Popular posts from this blog

JSON Serialization & Deserialization in c#

 Serialization: Serialization is the process of converting an object into a stream of bytes to store the object or transmit it to memory, a database, or a file. JSON Serialization: JSON serialization serializes the public properties of an object into a string, byte array, or stream.  public static string SerializeObject(object obj)         {             string jsonString = null;             DataContractJsonSerializer serializer = null;             MemoryStream memorystream = null;             try             {                 serializer = new DataContractJsonSerializer(obj.GetType());                 memorystream = new MemoryStream();                 serializer.WriteObject(memorystream, obj);...

Angular 4 Interview questions

Angular 4 Interview questions experienced Angular 4 Interview questions Animations Questions: How do you define transition between two states in Angular? How do you define a wildcard state? Architecture Questions: What is a good use case for ngrx/store? Can you talk about a bug related to a race condition, how to solve it and how to test it? API Questions: What does this code do: @ HostBinding ( ' class.valid ' ) isValid ; < div * ngIf = ' someObservableData | async as data; else loading ' >{{data}}</ div > < ng-template # loading > Loading Data... </ ng-template > Why would you use renderer methods instead of using native element methods? What is the point of calling renderer.invokeElementMethod(rendererEl, methodName)? How would you control size of an element on resize of the window in a component? What would be a good use for NgZone service? How would you protect a component being activated throu...