Displaying no data available in Lightning Web Components

<template>
    <template if:true={contact}>
        <lightning-layout vertical-align="center">
            <lightning-layout-item padding="around-small">
                <p>{contact.Name}</p>
                <p>{contact.Title}</p>
                <p>
                    <lightning-formatted-phone
                        value={contact.Phone}
                    ></lightning-formatted-phone>
                </p>
            </lightning-layout-item>
        </lightning-layout>
    </template>
    <template if:false={contact}
        ><p>No contact data available.</p></template
    >
</template>

js code:

import { LightningElement, api } from 'lwc';
export default class ContactTile extends LightningElement {
    @api contact;
}

xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>contact</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>​​​​​​​