« Prev 1 2 3 4 5 6 7 8 9 10 Next »

Angular HTML binding

Create Date: April 29, 2019 at 12:37 AM         Tag: ANGULAR         Author Name: Sun, Charles

Angular HTML binding

The correct syntax is the following:

<div [innerHTML]="theHtmlString"></div>

Working in 7.2.13

Documentation Reference

How to bind raw html in Angular2 [duplicate]

Bind to the innerHTML attribute

There is 2 way to achieve:

<div [innerHTML]="myField"></div>
<div innerHTML="{{myField}}"></div>

To mark the passed HTML as trusted so that Angulars DOM sanitizer doesn't strip parts of

<div [innerHTML]="myField | safeHtml"></div>

with a pipe like

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

See also In RC.1 some styles can't be added using binding syntax

New Comment

Copy angular from windows to linux and got an error: Failed to exec start script

Create Date: April 27, 2019 at 11:24 PM         Tag: ANGULAR         Author Name: Sun, Charles

this issue is due to the angular.json. I also install plugin: TSLint

I run the below commadn to resolve the issue:

ng update @angular-devkit/build-angular
npm install yarn

Data path '''' should NOT have additional properties (es5BrowserSupport)

es5BrowserSupport add additional polyfill

Solution 1

For option es5BrowserSupport your @angular/cli required minimum version 7.3 and @angular-devkit/build-angular required minimum version 0.13 .

  1. Check your @angular/cli version. if is less than 7.3 then run following command

    ng update @angular/cli

  2. Check your @angular-devkit/build-angular version. if is less than 0.13 then run following command

    ng update @angular-devkit/build-angular

Solution 2

Also you can edit angular.json file and find "es5BrowserSupport": true and comment it. It will also work without updating dependency

Server (ng serve) cannot be started in angular 2

The problem is withing the scripts key inside the JSON since JSON specification doesn't allow a trailing comma.

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/ion-rangeslider/js/ion.rangeSlider.min.js",
    "../src/assets/js/bootstrap-slider/bootstrap-slider.min.js",
    "../src/assets/js/slider.js",
    "../node_modules/materialize-css/dist/js/materialize.min.js",

]

Simply remove the blank line together with the comma at the end of the line just like in the snippet below.

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/ion-rangeslider/js/ion.rangeSlider.min.js",
    "../src/assets/js/bootstrap-slider/bootstrap-slider.min.js",
    "../src/assets/js/slider.js",
    "../node_modules/materialize-css/dist/js/materialize.min.js"
]
New Comment

sec7120: [cors] the origin 'http://localhost:4200' did not find ...

Create Date: April 18, 2019 at 10:58 PM         Tag: ANGULAR         Author Name: Sun, Charles

if angular app cannot connect to .net core api, in the debugging mdoe, check debugger for the error information. it is usually due to Cross-Origin Requests(CORS).

Enable Cross-Origin Requests (CORS) in ASP.NET Core

CORS with named policy and middleware

CORS Middleware handles cross-origin requests. The following code enables CORS for the entire app with the specified origin:

C#
public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins,
            builder =>
            {
                builder.WithOrigins("http://example.com",
                                    "http://www.contoso.com");
            });
        });

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseCors(MyAllowSpecificOrigins); 

        app.UseHttpsRedirection();
        app.UseMvc();
    }
}

The preceding code:

New Comment
« Prev 1 2 3 4 5 6 7 8 9 10 Next »