Data passed from parent to child component is not showing

Hello community , 

I have 2 components - componentA(parent) and component B(child) 

when I pass data from parent to child , data is not visible. 

can anyone explain why ? 

component A html - 

<template>

    <lightning-card label="component A - parent">

        <p>Hi.I am component A.Parent</p>

        <c-component-B>

            {property1}="hi.I am component B.child component"

            {property2}="Welcome"

        </c-component-B>

    </lightning-card>

</template>   

component A js - 

import { LightningElement } from 'lwc';

export default class ComponentA extends LightningElement {

} 

component B html - 

<template>

    <lightning-card>

       <p>message passed from {property1}</p>

       <p>message passed from {property2}</p>

    </lightning-card>

</template> 

component B js - 

import { LightningElement,api} from 'lwc';

export default class ComponentB extends LightningElement {

    @api property1;

    @api property2;

} 

can anyone suggest something ??