Image

cf-image

Image component consists of two parts:

• image;

• label.

Using

app.html

<h3>{{ title0 }}</h3>
<cf-image></cf-image>
<h3>{{ title1 }}</h3>
<cf-image [properties]="myImage1" [styling]="imageStyling1"></cf-image>
<h3>{{ title2 }}</h3>
<cf-image [properties]="myImage2" [styling]="imageStyling2"></cf-image>
<h3>{{ title3 }}</h3>
<cf-image [properties]="myImage3" [styling]="imageStyling3"></cf-image>
<h3>{{ title4 }}</h3>
<cf-image [properties]="myImage4" [styling]="imageStyling2"></cf-image>
<h3>{{ title5 }}</h3>
<cf-image [properties]="myImage5" [styling]="imageStyling3" [notification]="myNotifications"></cf-image>
<cf-button md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>

app.ts

title0 = 'Default Image Template';
defaultImage = new ImageModel ();

title1 = 'Image without text and with style (border)';
myImage1 = new ImageModel ({
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg'
});
imageStyling1 = new ImageStylingModel ({
    image: {
      class: "image1"
    }
});

title2 = 'Image text on top';
myImage2 = new ImageModel ({
    label: 'My image text',
    labelPosition: 'top',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg',
});
imageStyling2 = new ImageStylingModel ({
    label: {
      class: "label2"
    },
    image: {
      class: "image2"
    }
});

title3 = 'Image text on right';
myImage3 = new ImageModel ({
    label: 'My image text',
    labelPosition: 'right',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg'
});
imageStyling3 = new ImageStylingModel ({
    label: {
      class: "label2"
    },
    image: {
      class: "image3"
    }
});

title4 = 'Image text on bottom';
myImage4 = new ImageModel ({
    label:'My image text',
    labelPosition: 'bottom',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg',
});

title5 = 'Image text on left';
myImage5 = new ImageModel ({
    label:'My image text',
    labelPosition: 'left',
    url: 'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-11.jpg',
});

letters = 0;
myNotifications: NotificationModel = {
    value: this.letters,
    classes: 'mat-accent',
    position: 'bottom-right'
};
sender = new ButtonModel({
    label: "Send mail",
    color: {
      foreground: "",
      background: "primary"
    }
});
sendMessage() { ++this.myNotifications.value; }

app.scss

/deep/ {
  .image1 {
    width: 100%;
    height: 100px;
    border: 2px solid black;
  }
  .label2 {
    color: coral;
    align-items: center;
    justify-content: center;
    background: purple;
  }
  .image2 {
    width: 100%;
    height: auto;
  }
  .image3 {
    width: auto;
    height: 300px;
  }
}

Image input properties

Attr	Type	Details
display	boolean	To show / hide component
label	string	It is label for image
labelPosition	string	It is label position. Default: bottom. Can be: top, bottom, right, left.
url	string	It is image url

Image styling properties

Attr	Type	Details
container	StylingModel	Styling properties for image container
label	StylingModel	Styling for image label
image	StylingModel	Styling for image itself